Skip to content

Instantly share code, notes, and snippets.

@hakimel

hakimel/reveal-swap-deck-sync.tsx

Created June 4, 2024 09:09
Show Gist options
  • Save hakimel/fd0da8d235b1a89a513f84aa2025fb9d to your computer and use it in GitHub Desktop.
Save hakimel/fd0da8d235b1a89a513f84aa2025fb9d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment