Need help with react-presents?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

469 Stars 42 Forks MIT License 93 Commits 8 Opened issues


React slideshow framework

Services available


Need anything else?

Contributors list

Getting started


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


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:

Example Usage

Creating a Slide

Presentation slides are simple to create. You can use

with some predefined styles, or simply create a slide with custom layout by wrapping its content in
with 100% height and width. Below is a couple of example slides: ```jsx /* SomeSlide.js */ import React from 'react' import { ContentSlide, Step } from 'react-presents'

export default () => (

A simple slide

Slides can contain multiple steps.

  • Sub-text can appear only for a specific step
  • Or it can be additive
  • (By default it is additive)
  • They can also be shown for a range
) ```

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

attribute, eg:
/* SomeSlide.js */
import React from 'react'
import { ContentSlide } from 'react-presents'

const slide = () => (


{/* Your content goes here */} )

slide.title = 'The first slide'

export default slide

Also note that react-select is used beneath the hood so the

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: ```jsx import React from 'react' import { Presentation, Slide, DropDownNav } from 'react-presents'

export default () => ( {, index) => ( )).concat( )} ) ```

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



Presenter mode

To include presenter mode, you could use

enabling you to move to presenter mode by pressing
as shown below:




Syntax highlighting powered by react-codemirror.

| Property | Type | Required | Description | |:---|:---|:---:|:---| | className | string | | Optional CSS class name to attach to root code mirror node | | codeMirrorOptions | object | | Configuration obect to pass to CodeMirror | | dimLines | array | | Array of line-number ranges for lines that should be dimmed | | highlightLines | array | | Array of line-number ranges for lines that should be highlighted | | value | string | ✓ | String to highlight |


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

| Property | Type | Required | Description | |:---|:---|:---:|:---| | children | node | | Any valid React node |


Main presentation component, a collection of slides.

| Property | Type | Required | Description | |:---|:---|:---:|:---| | children | any | ✓ | Any React node (typically slides) | | disableTheme | bool | | Do not set default theme/styles | | router | any | | Specific react-router implementation to use;

is used by default |


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.

| Property | Type | Required | Description | |:---|:---|:---:|:---| | component | node | | Any valid React node | | render | function | | Function that returns a React element |


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

| Property | Type | Required | Description | |:---|:---|:---:|:---| | children | node | ✓ | Any valid React node | | exact | bool | ✓ | Only show content when the slide's current step index is exactly the

specified | | index | number | | Don't show child content until the current step index is at least equal to this | | maxIndex | number | | Don't show child content if the current step index exceeds this |


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

| Property | Type | Required | Description | |:---|:---|:---:|:---| | children | node | | Any valid React node |


react-presents is available under the MIT License.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.