• Stars
    star
    499
  • Rank 88,341 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 8 years ago
  • Updated about 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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>

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:

<Presentation>
  <PresenterModePlugin />
  {slides}
</Presentation>

Api

Code

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

ContentSlide

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

Property Type Required Description
children node Any valid React node

Presentation

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; HashRouter is used by default

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.

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

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

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 index 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

TitleSlide

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

Property Type Required Description
children node Any valid React node

License

react-presents is available under the MIT License.

More Repositories

1

react-virtualized

React components for efficiently rendering large lists and tabular data
JavaScript
26,161
star
2

react-window

React components for efficiently rendering large lists and tabular data
JavaScript
15,571
star
3

react-error-boundary

Simple reusable React error boundary component
TypeScript
6,712
star
4

react-resizable-panels

TypeScript
3,668
star
5

react-highlight-words

React component to highlight words within a larger body of text
JavaScript
2,153
star
6

js-search

JS Search is an efficient, client-side search library for JavaScript and JSON objects
JavaScript
2,150
star
7

progress-estimator

Logs a progress bar and estimation for how long a Promise will take to complete
JavaScript
2,139
star
8

redux-search

Redux bindings for client-side search
JavaScript
1,404
star
9

react-virtualized-select

HOC that uses react-virtualized and react-select to display large lists of options in a drop-down
JavaScript
1,165
star
10

react-devtools-experimental

Experimental rewrite of the React DevTools extension
966
star
11

react-window-infinite-loader

InfiniteLoader component inspired by react-virtualized but for use with react-window
JavaScript
894
star
12

react-virtualized-auto-sizer

Standalone version of the AutoSizer component from react-virtualized
TypeScript
600
star
13

planner

Lightweight, interactive planning tool that visualizes a series of tasks using an HTML canvas
JavaScript
545
star
14

angular-form-for

Set of Angular directives to simplify creating and validating HTML forms.
JavaScript
428
star
15

js-worker-search

JavaScript client-side search API with web-worker support
JavaScript
415
star
16

react-flame-graph

React component for visualizing profiling data
JavaScript
390
star
17

suspense

Utilities for working with React Suspense
TypeScript
353
star
18

jest-react-profiler

Jest helpers for working with the React Profiler API.
JavaScript
278
star
19

highlight-words-core

Utility functions shared by react-highlight-words and react-native-highlight-words
JavaScript
229
star
20

react-select-fast-filter-options

react-select filterOptions function optimized to quickly filter large options lists
JavaScript
207
star
21

redux-devtools-filterable-log-monitor

Filterable tree view monitor for Redux DevTools
JavaScript
155
star
22

personal-logger

Webapp for tracking personal diet, sleep, and general wellness
JavaScript
124
star
23

react-highlight.js

A simple React wrapper around the Highlight.js library
JavaScript
106
star
24

use-context-menu

React components for displaying configurable context menus
TypeScript
93
star
25

debounce-decorator

Decorator for debouncing class methods
JavaScript
93
star
26

forward-js-2017

Forward - Web Technology Summit
JavaScript
85
star
27

infinite-list-reflow-examples

Examples illustrating reflow handling with infinite lists
JavaScript
62
star
28

tweets

Twitter-like demo with limited functionality
JavaScript
56
star
29

react-devtools-tutorial

Interactive tutorial featuring the React DevTools v4
JavaScript
55
star
30

turdle

Wordle clone dedicated to πŸ’©
JavaScript
55
star
31

jasmine-promise-matchers

Custom matchers for use with Jasmine 1.3 - 2.2 and Angular Promise objects.
JavaScript
51
star
32

babel-repl

React powered Babel REPL
JavaScript
42
star
33

extensions-api-proposal-custom-performance-pane

Extensions API proposal for the Performance Panel
36
star
34

react-window-table

JavaScript
34
star
35

immutable-js-store

Tiny observable wrapper around Immutable JS with rewind/replay support
JavaScript
34
star
36

task-runner

Async utilities for JavaScript application development with a focus on interruptibility and error-handling
JavaScript
34
star
37

live-stream-deep-dive-react-profiler

Source from live stream "Deep dive with the React DevTools profiler"
JavaScript
32
star
38

react-window-vs-react-virtualized-synced-grids

Comparison of react-virtualized MultiGrid to two react-window synced Grids
JavaScript
29
star
39

fps-measurer

Tiny testing utility for gathering FPS statistics
JavaScript
29
star
40

react-suspend-in-parallel

TypeScript
29
star
41

console.pretty

Pretty console logging
JavaScript
27
star
42

palettable

Generates an HTML color palette from SASS or Stylus source.
JavaScript
26
star
43

jasmine-es6-promise-matchers

ES6 Promise compatible Jasmine matchers
JavaScript
24
star
44

print-color

Utility for printing colored text in Node or the Browser
JavaScript
21
star
45

scheduling-profiler-prototype

Custom profiler prototype for React's concurrent mode
JavaScript
18
star
46

ng2-virtualized

Angular 2 components for efficiently rendering large, scrollable lists and tabular data
JavaScript
18
star
47

react-ascii-image

React component that displays image data as colored text
JavaScript
18
star
48

react-resizable-panels-demo-ssr

TypeScript
16
star
49

connect-tech-2016

Connect Tech 2016 presentation
JavaScript
14
star
50

react-wait-to-render

A function, component and mixin to defer component rendering until all required props are present
JavaScript
13
star
51

forms-js

Core forms-js library
JavaScript
12
star
52

faux-codesandbox-client

Example Code Sandbox and React DevTools v4 integration
JavaScript
11
star
53

react-conf-2018-profiling-keynote

2018 React Conf Profiling keynote
JavaScript
10
star
54

resume

HTML
10
star
55

bsky

Bluesky web UI (just for fun)
TypeScript
8
star
56

flat-object

Utilities for working with nested data structures
JavaScript
7
star
57

source-map-parsing-benchmark

JavaScript
6
star
58

react-immutable-js-store

React wrapper around immutable-js-store
JavaScript
6
star
59

test-extension-network-caching

JavaScript
6
star
60

react-devtools-triage-bot

GitHub bot for labeling and assigns bug reports for React DevTools that don't include repro info
JavaScript
5
star
61

jasmine-object-matchers

Custom object equality matchers for use with Jasmine 2.0.
JavaScript
5
star
62

react-createRoot-Suspense-async-act

JavaScript
4
star
63

game-of-life

TypeScript
3
star
64

react-devtools-inline-node-and-web-poc

JavaScript
3
star
65

test-github-issue-template

https://gh-community.github.io/issue-template-feedback/structured
3
star
66

test-named-hooks

Example create-react-app project meant to test React DevTools named hooks functionality
JavaScript
3
star
67

temp-devtools-profiler

Partial fork of React DevTools for testing Profiler plugin UI
JavaScript
3
star
68

TaskManager

Task Manager is an ActionScript library designed to simplify the implementation of asynchronous processes. This article is an introduction-to (and overview-of) the library.
3
star
69

stardew-valley-fishing

Silly fishing mini-game
TypeScript
3
star
70

bootstrap-select-button

Creates an Angular-friendly bindable button dropdown using the Bootstrap CSS framework
JavaScript
3
star
71

parcel-alpha-postcss-bug

JavaScript
2
star
72

test-github-actions

JavaScript
2
star
73

galaxiga-upgrade-tool

Web app to accompany Galaxiga mobile game
TypeScript
2
star
74

jqolor

JavaScript color picker built on top of jQuery and Bootstrap.
JavaScript
2
star
75

bvaughn

2
star
76

.github

2
star
77

bug-repro-suspense-cache-read-extra-renders

JavaScript
1
star
78

briandavidvaughn

Angular website
HTML
1
star
79

example-eslint-rule-override-issue

Repro
JavaScript
1
star
80

react-suspense-transition-demo-app

Demo app
TypeScript
1
star
81

website

Personal website
TypeScript
1
star
82

SoundClouDownloader

Chrome extension enabling automatic downloads of any SoundCloud track, even when download option is disabled
JavaScript
1
star
83

gatsby-remark-prismjs-react-live-bug

Shows a bug between the 'gatsby-remark-prismjs' plugin and the 'react-live' library
CSS
1
star
84

transcluder

Another Angular directive to help with multiple transclusion within a single directive
JavaScript
1
star
85

jest-uncaught-error-repro

JavaScript
1
star
86

reflex-unit

Automatically exported from code.google.com/p/reflex-unit
HTML
1
star
87

TaskManagerCoffeeScript

CoffeeScript
1
star