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

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.

CodePudding user response：

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;