Can't use useLightboxState

[Bravemobin]

when I try to use useLightboxState() next js give me this error

"Error: useLightboxState must be used within a LightboxStateContext.Provider"

and next I use give me this error

"TypeError: Cannot read properties of undefined (reading 'length')"

I have no idea what should I do

[igordanchenko]

Lightbox hooks can be used only in a component rendered inside the lightbox (i.e., custom button, or any other component you add to the lightbox with a plugin).

if you want to access the lightbox state outside the lightbox, you can use the Controller ref.

Can you share your draft, and describe what are you trying to implement?

[Bravemobin]

thanks I going to check this In document
I want use currentindex to access my arrays element
and another question, does lightbox support add items to array onclick next item or previous item ?
example I have 50 image I want when currentindex in 45 I load more images

[igordanchenko]

You probably want to use the on.view callback in this case.

<Lightbox
  on={{ 
    view: ({ index }) => { 
      // ...
    } 
  }}
/>

Here is an example demonstrating how you can dynamically add slides to the lightbox - https://codesandbox.io/p/sandbox/yet-another-react-lightbox-128-7mczyy?file=%2Fsrc%2FApp.tsx

[igordanchenko]

@Bravemobin, does this answer your question?

[Alireza-Ghavabesh]

hi
i have similar question, i added more props to my slides like this:

slides = [
    {
       src: "some url",
       user_id: user_id,
       image_id: image_id,
    }
]

how can i access to this custom props (user_id and image_id) ?
i added button with toolbar and i want access to this props when clicked button.

[Alireza-Ghavabesh]

i found solution:

on={{
  view: () => console.log(ref.current.getLightboxState().currentSlide),
}}