Slideshow framework built w/ react-router 4

react-presents

React slideshow framework.

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.

GitHub