How to use the open function in useGallery hook?

[mivd7]

Hi,
I'm trying to use your useGallery hook, that exposes an open function outside of the <item> component, with which you should be able to open the gallery at a given index.

const { open } = useGallery();
//...
<Gallery>
                        //...
                        <Item original={images[2].src} width="1024" height="768">
                            {({ ref, open }) => (
                                <div
                                    tabIndex={0}
                                    onKeyDown={() => {}}
                                    role="button"
                                    onClick={open}
                                    className="h-50 w-100"
                                >
                                    <figure
                                        ref={ref}
                                        style={{ backgroundImage: `url(${images[2].src})` }}
                                        className="h-100 w-100 photo-third"
                                    />
                                </div>
                            )}
                        </Item>
                        <div className="overlay">
                            //...
                            <button type="button" onClick={() => open(0)} id="show">
                                show
                            </button>
                        </div>
</Gallery>

My code looks roughly like this where the button to open the gallery is outside the image items. However clicking on the button doesn't seem to do anything. I can't find an example in your docs or anywhere else on how to use this. Could you please explain or share a working example?

[MaximKondratev]

Hello. I'm pretty sure what problem you have. Gallery component provides context for useGallery hook. If you call hook before rendering context, it won't find it. Probably how your code looks like:

const App = () => {
    const { open } = useGallery(); // will not work. there is no context rendered before App component

    return (
        <Gallery>   
             {your code here}
        </Gallery>
    )
}

How it should look like:

const AppContent = () => {
    const { open } = useGallery(); // will work, context is rendered

    return (
        {your code}
    )
}

const App = () => {
    return (
        <Gallery>
            <AppContent />
        </Galler>
    );
}

[irudoy]

It would be nice to add a small example in the useGallery readme section