React Slideshow Framework – react-presents

Getting started

Install react-presents using npm.

npm install react-presents --save

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

// Import the components you want like so: import { Presentation, Slide } from 'react-presents'

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

<script src="path/to/react-presents/dist/umd/react-presents.js"></script>

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:

/* SomeSlide.js */ import React from 'react' import { ContentSlide, Step } from 'react-presents'  export default () => (   <ContentSlide>     <h1>A simple slide</h1>     <p>Slides can contain multiple steps.</p>     <ul>       <Step index={1} exact><li>Sub-text can appear only for a specific step</li></Step>       <Step index={2}><li>Or it can be additive</li></Step>       <Step index={3}><li>(By default it is additive)</li></Step>       <Step index={4} maxIndex={5}><li>They can also be shown for a range</li></Step>     </ul>   </ContentSlide> )

Automatically Loading Slides

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

Webpack 2

/* Application.js */ const slides = require.context('./path/to/slides/', false, /\.js$/)   .keys()   .map((filename) => filename.replace('./', './path/to/slides/'))   .map((path) => require(path).default)

Webpack 3

/* Application.js */ const slides = [] const context = require.context('./path/to/slides/', false, /\.js$/) context   .keys()   .forEach(key => slides.push(context(key).default))

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:

/* Application.js */ const options = slides   .map((slide, index) => ({     label: slide.title,     value: index   }))   .filter((option) => option.label)

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

/* SomeSlide.js */ import React from 'react' import { ContentSlide } from 'react-presents'  const slide = () => (   <ContentSlide>     <h1>{slide.title}</h1>     {/* Your content goes here */}   </ContentSlide> )  slide.title = 'The first slide'  export default slide

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:

import React from 'react' import { Presentation, Slide, DropDownNav } from 'react-presents'  export default () => (   <Presentation>     {slides.map((Component, index) => (       <Slide         component={Component}         key={index}       />     )).concat(       <DropDownNav         key='DropDownNav'         options={options}       />     )}   </Presentation> )

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

<Presentation disableTheme>   {slides} </Presentation>

Api

Code

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.

Slide

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.

Step

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).

TitleSlide

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

License

react-presents is available under the MIT License.