react-reveal.js v1.0.2

react-reveal.js

React component to host a reveal.js presentation.

Installation

npm

npm install react-reveal.js

yarn

yarn add react-reveal.js

Please notice that typings for this module are already included.

Usage

First, please follow the reveal.js instructions on how to enable it properly in a web page.

For the component itself load the API:

var RevealJS = require("react-reveal.js");

Then configure reveal.js options and plugins, as officially documented.

Here we enable support for very likely required things like markup and markdown, plus speaker notes. You may skip one or the other if your presentation doesn't require them.

var options = {
    dependencies: [
        {
            condition: function () { return !!document.querySelector("[data-markdown]"); },
            src: "plugin/markdown/marked.js"
        }, 
        {
            condition: function () { return !!document.querySelector("[data-markdown]"); },
            src: "plugin/markdown/markdown.js"
        }, 
        {
            async: true,
            src: "plugin/notes/notes.js"
        }
    ]
};

The presentation is a simple collection of slides, combined with such options. Here is an example of something very basic with three slides, the second and third one being nested:

var presentation = {
    options: options,
    sections: [
        {
            id: "title",
            markdown: "some title in `markdown`"
        },
        [
            {
                id: "second",
                markup: "<p>second slide, in HTML</p>",
                notes: "something extra to keep in mind"
            },
            {
                id: "third-one",
                markdown: "some more markup ... no notes for you!"
            }
        ]
    ]
}

Each slide carries an optional identitifier, either markup or markdown text and, if you like, some speaker notes.

At rendering time simply but your presentation into the DOM node of your choice:

<div>
    <RevealJS.Component presentation={presentation}/>;
</div>