Question about hiding toolbar, title, and description for a custom slide

[dronem]

Hi,

Thank you for creating such a fantastic library! I'm currently using Yet Another React Lightbox and have a specific question regarding customization.

I have a custom slide, and I'd like to hide the toolbar, title, and description only when this specific slide is displayed. Is there a way to achieve this behavior? If so, could you guide me on how to implement it?

Thanks in advance for your help!

Best regards,

[igordanchenko]

Please see if the following approach works for you.

import "./yarl.css";

// ..

const [index, setIndex] = React.useState<number>();
const [hideControls, setHideControls] = React.useState(false);

// ...

<Lightbox
  index={index}
  open={index !== undefined}
  close={() => setIndex(undefined)}
  on={{
    view: ({ index: currentIndex }) => {
      setIndex(currentIndex);
      setHideControls(slides[currentIndex].type === "custom-slide");
    },
  }}
  className={hideControls ? "yarl__hide-controls" : undefined}
  // ...
/>

/* yarl.css */

.yarl__hide-controls .yarl__toolbar,
.yarl__hide-controls .yarl__slide_captions_container {
  visibility: hidden;
}

[dronem]

Thank you for your response! I really appreciate your help.

I’ve tried a similar approach before (found it in earlier responses), and I’ve also tested your suggested solution. However, I’m encountering an issue: due to the state change, the lightbox behaves incorrectly when navigating left or right. It ends up displaying only one type of slide or doesn’t show all slides.

If I remove this specific change, everything works as expected.

Do you have any suggestions for resolving this issue?

Thanks again for your time and support!

Best regards,

[igordanchenko]

Please make sure you are providing the index prop as in the above example.

[dronem]

Thank you for your follow-up!

Yes, I’ve confirmed that the index is correctly passed as a prop. When I remove this code, everything works as expected without any issues.

It seems like the issue is directly related to how the state change is handled. Do you have any other suggestions or alternative approaches that might avoid this behavior?

Thank you again for your time and assistance!

Best regards,

[igordanchenko]

You need to call setIndex(currentIndex) unconditionally in the on.view callback exactly as in the example I provided above. It’s there for a reason.

[dronem]

That’s perfect—everything works flawlessly now!
Дякую
Thank you so much for your help and for pointing me in the right direction. I really appreciate your support!

Best regards,