I am facing problem using Simple React Lightbox Next js? - reactjs

Question

I am building nextjs application. I want a lightbox feature that only show a button, then when I click the button it show the lightbox gallery. But default or on page load there should not be show images. Just when I click a button it show light box. Like when I clicked the button-
Then It start lightbox-
How can I do that?
Here I am trying to use Simple React LightBox. This package support hook. But there are not well documented to understand how to use hook. First Of all I create a button and then I create a lightbox component. Like this-
import {Container, Flex, Box, Image, Paragraph} from "theme-ui";
import SingleRooms from "data/SingleRooms";
import SimpleReactLightbox, {SRLWrapper, useLightbox} from "simple-react-lightbox";
const SingleImages = () => {
const {openLightbox, closeLightbox} = useLightbox()
return (
<Container>
<button onClick={() => openLightbox()}>
Open the third image
</button>
<SimpleReactLightbox>
<SRLWrapper>
<a href={SingleRooms.images[0].path}>
<img src={SingleRooms.images[0].path} alt="Umbrella"/>
</a>
<a href={SingleRooms.images[1].path}>
<img src={SingleRooms.images[1].path} alt="Blue sky"/>
</a>
</SRLWrapper>
</SimpleReactLightbox>
</Container>
);
};
export default SingleImages;
It is not working. Actually I don't know to use it. Please help me to use it with my wanted options. Just show a button then when clicked button there should be show the light box. Please help me.

Answer 1

According to the simple-react-lightbox documentation:
First of all you need to wrap your React app with the main component so that it can create the context.
So in your top-level (root/main/index) component:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import SimpleReactLightbox from 'simple-react-lightbox'
ReactDOM.render(
<React.StrictMode>
<SimpleReactLightbox> // ----> here
<App />
</SimpleReactLightbox>
</React.StrictMode>,
document.getElementById("root")
);
export default App;
Now, in the SingleImages component:
import {Container, Flex, Box, Image, Paragraph} from "theme-ui";
import SingleRooms from "data/SingleRooms";
import {SRLWrapper, useLightbox} from "simple-react-lightbox";
const SingleImages = () => {
const {openLightbox, closeLightbox} = useLightbox()
return (
<Container>
<button onClick={() => openLightbox()}>
Open the third image
</button>
<SRLWrapper>
<a href={SingleRooms.images[0].path}>
<img src={SingleRooms.images[0].path} alt="Umbrella"/>
</a>
<a href={SingleRooms.images[1].path}>
<img src={SingleRooms.images[1].path} alt="Blue sky"/>
</a>
</SRLWrapper>
</Container>
);
};
export default SingleImages;