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.

Live Demo

CodeSandbox

Edit on CodeSandbox