Reactフレームワーク

reveal.jsは、いくつかの異なる方法でReactプロジェクトに追加できます。

npm経由でreveal.jsをインストールしてセットアップする
サードパーティパッケージを使用する

npmからのインストール

JavaScript/TypeScriptソースファイル（例：main.tsxまたはapp.tsx）でreveal.jsを追加して初期化できます。

グローバル（つまり、アプリ/コンポーネント関数の外）またはそれらのいずれかの中で行うことができます。後者の場合、初期化を重ねないように注意する必要があります。スライドデッキは一度だけ初期化してください。再構成が必要な場合は、configure関数を使用するか、再度初期化する前にデッキをdestroyしてください。

開始するには、npmを使用してrevealをインストールします

npm install reveal.js

TypeScriptを使用している場合は、型もインストールする必要があります

npm i --save-dev @types/reveal.js

インポート

次のインポートが必要です

import Reveal from 'reveal.js';
import 'reveal.js/dist/reveal.css';
import 'reveal.js/dist/theme/black.css'; // "black" theme is just an example

初期化

最後に、プロジェクトのニーズに最も適した初期化コードを追加します。

スライドデッキのコンテナが返されたJSXにあるアプリまたはコンポーネント関数内でスライドデッキを初期化する場合は、useEffectフックを使用して実行することをお勧めします。これにより、コンテナが最初にレンダリングされた後に初期化が確実に実行されます。

また、スライドデッキコンテナのdivと対応するrevealインスタンスのハンドルを保持するために、refsを使用することをお勧めします。これらのrefsは、各スライドデッキが一度だけ初期化されるようにするのに役立ちます。

完全な動作例を次に示します

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

function App() {
    const deckDivRef = useRef<HTMLDivElement>(null); // reference to deck container div
    const deckRef = useRef<Reveal.Api | null>(null); // reference to deck reveal instance

    useEffect(() => {
        // Prevents double initialization in strict mode
        if (deckRef.current) return;

        deckRef.current = new Reveal(deckDivRef.current!, {
            transition: "slide",
            // other config options
        });

        deckRef.current.initialize().then(() => {
            // good place for event handlers and plugin setups
        });

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

    return (
        // Your presentation is sized based on the width and height of
        // our parent element. Make sure the parent is not 0-height.
        <div className="reveal" ref={deckDivRef}>
            <div className="slides">
                <section>Slide 1</section>
                <section>Slide 2</section>
            </div>
        </div>
    );
}

export default App;

RevealコンストラクタでのdeckDivRefの使用に注意してください。これは、同じReactアプリに複数のデッキを追加する場合に重要です。

Reactポータル

特定のスライドにいくつかのコンポーネントを散りばめたいだけの場合は、reveal.js DOMツリーをReactの外に保持し、Reactポータルを使用して、Reactコンポーネントを特定のセクションに配置することをお勧めします。

サードパーティパッケージ

次のサードパーティパッケージは、ReactプロジェクトにReveal.jsプレゼンテーションを追加したり、Reveal.jsプレゼンテーションにReactコンポーネント/アプリを追加したりするのに役立つ可能性があります

revealjs-react - RevealJSプレゼンテーションライブラリのReactラッパー。
react-reveal-slides - ReactでReveal.jsプレゼンテーションを完全に作成するためのReactコンポーネント。
revealjs-react-boilerplate - Reactを使用してrevealJSプレゼンテーションを作成するためのボイラープレート。