Custom Slides
Yet Another React Lightbox is not limited to just image slides or video slides, and you can render pretty much any supported media via a custom render function.
<Lightbox
slides={[
{
type: "custom-slide",
// slide attributes
}
]}
render={{
slide: (slide) =>
slide.type === "custom-slide" ? <MyCustomSlide slide={slide} /> : undefined
}}
//...
/>
TypeScript
Register custom slide type in TypeScript:
// yet-another-react-lightbox.d.ts
interface CustomSlide {
type: "custom-slide";
// slide attributes
}
declare module "yet-another-react-lightbox" {
interface SlideTypes {
CustomSlide: CustomSlide;
}
}
export {};
<Lightbox
slides={[
{
type: "custom-slide" as const,
// slide attributes
}
]}
render={{
slide: (slide) =>
slide.type === "custom-slide" ? <MyCustomSlide slide={slide} /> : undefined
}}
//...
/>
Here is an example of a text slide with CSS animation.