Using custom controls

[approximator]

Hello,

I need some custom controls to work with an image currently opened in the lightbox.
Could you please give me a hint how does some custom control know which image is currently
opened in lightbox.

I can capture an image in lightboxWillOpen callback, but it will differ when user clics "Next".

Here is a piece of code with comments:

        <Gallery
            images={photos}
            rowHeight={250}
            onSelectImage={this.onSelectImage}
            lightboxWillOpen={(index) => {
                console.log(index)
                this.setState({ currentImage: index })
                // can set store index inside the state (for custom controls)
                // but how to keep track of current image when user clicks 
               // "Next" in lightbox?
           }}

            customControls={[
               <Button icon='images' onClick={() => {
                    // how to determine current image inside the lightbox?
                }}/>
           ]}
        />

Thank you!

[benhowell]

The current image is stored in this.state.currentImage. You shouldn't be setting it manually.

[approximator]

Thank you for the prompt answer.
Unfortunately, the this.state.currentImage is not available inside the custom control click handler.
Here is the simplified sandbox code of what I am trying to do: https://codesandbox.io/s/yj2po5m9px?module=%2Fsrc%2Fphotos.js

When a user opens lightbox and clicks "ClickMe" button, what is the correct way to get currentImage (I always get undefined when accessing this.state.currentImage)?
Thank you.

[benhowell]

The lightbox control and custom controls within it are handled by the react-images library. You'll need to take a look over there to answer your question as I've not had the need to implement custom controls so I don't know off the top of my head.

[approximator]

In react-images the currentImage supposed to be controlled from outside (parent) via props, thus currentImage is always known in the parent component and can be used in custom controls.

It seems that react-grid-gallery doesn't support that and custom controls quite useless here :(