reveal-swap-deck-sync.tsx

import { useEffect, useRef, useState } from "react";
import Reveal from "reveal.js";
import "reveal.js/dist/reveal.css";
import "reveal.js/dist/theme/black.css";

function Presentation() {
    const deckDivRef = useRef<HTMLDivElement>(null)
    const deckRef = useRef<Reveal.Api|null>(null);

    const deckContent = [
        <>
            <section data-background-image='https://images.unsplash.com/photo-1717309910177-0d4ec06db194'>Deck 1, Slide 1</section>
            <section data-background-color="indigo">Deck 1, Slide 2</section>
        </>,
        <>
            <section data-background-image='https://images.unsplash.com/photo-1584983333849-26ca57622ac2'>Deck 2, Slide 1</section>
            <section data-background-color="indigo">Deck 2, Slide 2</section>
        </>
    ];

    const [deckContentIndex, setDeckContentIndex] = useState(0);

    useEffect(() => {
        if (deckRef.current) return;

        deckRef.current = new Reveal(deckDivRef.current!, {
            keyboard: {
                82: () => setDeckContentIndex((prevIndex) => (prevIndex + 1) % deckContent.length)
            }
        });

        deckRef.current.initialize();

        return () => {
            try {
                if (deckRef.current && deckRef.current.isReady()) {
                    deckRef.current.destroy();
                    deckRef.current = null;
                }
            } catch (e) {
                console.warn("Reveal.js destroy call failed.");
            }
        };
    }, []);

    useEffect(() => {
        if( deckRef.current?.isReady() ) {
            deckRef.current?.sync();
        }
    }, [deckContent]);

    return (
        <div className="reveal" ref={deckDivRef}>
            <div className="slides">
                {deckContent[deckContentIndex]}
            </div>
        </div>
    );
}

export default Presentation;