react presentations

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

React slideshow framework

bvaughn/react-presents

Folders and files, repository files navigation, getting started.

Install react-presents using npm.

ES6, CommonJS, and UMD builds are available with each distribution. For example:

Alternately you can load a global-friendly UMD build which exposes a global ReactPresents object:

Now you're ready to start using the components.

For an example of a the kind of presentations that can be created with react-presents, check out my Connect Tech 2016 presentation on windowing with React: bvaughn.github.io/connect-tech-2016 .

Example Usage

Creating a slide.

Presentation slides are simple to create. You can use TitleSlide and ContentSlide with some predefined styles, or simply create a slide with custom layout by wrapping its content in div with 100% height and width. Below is a couple of example slides:

Automatically Loading Slides

Using a bundler like Webpack, you can auto-load slides using an approach like follows:

Creating a Nav Menu

Once you have an array of loaded slides, you can auto-populate the options for a nav menu using an approach like so:

Note that the above approach assumes that slides have a static title attribute, eg:

Also note that react-select is used beneath the hood so the options array you construct must be compatible with it.

Creating a presentation

Assuming you have an array of slides and options for the drop-down nav, you can create a presentation like follows:

A default theme is provided with react-presents. You can disable this theme by specifying the disableTheme property:

Presenter mode

To include presenter mode, you could use PresenterModePlugin enabling you to move to presenter mode by pressing p or P as shown below:

Syntax highlighting powered by react-codemirror .

ContentSlide

Slide container with basic formatting. Intended for slides with moderate amounts of content.

Presentation

Main presentation component, a collection of slides.

An individual slide. Slides are automatically mapped to urls (based on their position within the larger collection of slides). Each slide must specify either a React component or a render callback.

Helper component for deferring sections of a slide's content. This component allows a single slide to be broken down into multiple steps (eg bullet points).

Slide container with basic formatting. Intended for sparse content, title slides.

react-presents is available under the MIT License.

Contributors 9

• JavaScript 98.7%

React Framework

Reveal.js can be added to a React project a few different ways.

• Install and setup reveal.js via npm
• Use third-party packages

Installing From npm

You can add and initialize reveal.js in a JavaScript/TypeScript source file like main.tsx or app.tsx .

You can do so globally i.e. outside of app/component functions or inside one of them. In the latter case, you have to be careful not to stack initializations. Only initialize a slide deck once. If you need to reconfigure, use the configure function or destroy the deck before initializing again.

To begin, install reveal using npm :

If you are using TypeScript, you need to install the types as well:

You will need the following imports:

Initialization

Finally, add the initialization code most suitable to your project's needs.

If you decide to intialize the slide deck inside an app or component function where slide deck containers are in the returned JSX, we recommended you use a useEffect hook to do so. This will ensure that initialization happens after the containers are first rendered.

It is also recommended to use refs to maintain a handle on the slide deck container div and the corresponding reveal instance. These refs can help make sure each slide deck is only initialized once.

Here's a full working example:

Note the use of deckDivRef in the Reveal constructor. This is important if you want to add multiple decks to the the same React app.

React Portals

If you only want to sprinkle a few components into specific slides, we recommend keeping the reveal.js DOM tree outside of React and using React Portals to place react component into specific sections.

Third Party Packages

The following third-party packages might prove useful for adding Reveal.js presentations to React projects or for adding React components/apps to Reveal.js presentations:

• revealjs-react - A React wrapper for the RevealJS Presentation Library.
• react-reveal-slides - A React component for creating Reveal.js presentations entirely in React.
• revealjs-react-boilerplate - A boilerplate for creating revealJS presentations using React.

Slides.com — the reveal.js presentation editor.

Become a reveal.js pro in the official video course.