How to have the caption not show by default?

[Fexxix]

I want the captions to be not shown by default. This here works but it's hacky and there's a flash of the caption whenever a slide becomes active.

<Lightbox
  index={index}
  plugins={[Fullscreen, Captions]}
  captions={{ ref: captionsRef, showToggle: true }}
  on={{
    entered: () => {
    captionsRef.current?.hide();
    },
  }}
  slides={images.map((image) => ({
  src: image.url,
  alt: image.name,
  title: image.name,
  }))}
  open={index >= 0}
  close={() => setIndex(-1)}
/>

[igordanchenko]

Hi there! Thank you for bringing up this use case. While it's possible to eliminate the initial captions flash in the current version, the DX is far from perfect.

const [index, setIndex] = React.useState(-1);
const hideCaptions = React.useRef(false);

const handleCaptionsRef = React.useCallback(
  (captionsRef: CaptionsRef | null) => {
    if (captionsRef && hideCaptions.current) {
      hideCaptions.current = false;
      captionsRef.hide();
    }
  },
  []
);

// ...

<Lightbox
  index={index}
  plugins={[Fullscreen, Captions]}
  captions={{ ref: handleCaptionsRef, showToggle: true }}
  on={{
    entering: () => {
      hideCaptions.current = true;
    },
  }}
  slides={slides.map((slide) => ({
    ...slide,
    title: "Slide title",
    description: "Slide description",
  }))}
  open={index >= 0}
  close={() => setIndex(-1)}
/>

https://stackblitz.com/edit/yet-another-react-lightbox-279?file=src%2FApp.tsx

I'll add a configuration option for the initial state.

[Fexxix]

Thanks, it works for my use case. Though, it doesn't persist between renders like when I close the lightbox and reopen it, its hidden. Not that that is a problem for me with what I'm working on right now but how about a showCaption option just like showToggle so that the caption state can be controlled externally. That way, one can use local storage for preference persistence too.

[igordanchenko]

As I mentioned above, I'll add an option for this. Please follow #280 for updates.

[igordanchenko]

This is now available in 3.20.0:

captions={{ showToggle: true, hidden: true }}