revealjs-react v0.1.0

revealjs-react

A React wrapper for the RevealJS Presentation Library.

Installation

npm install --save revealjs-react

Usage

import React from 'react';
import { render } from 'react-dom';
import { RevealJS, Slide, H } from 'revealjs-react';
import RevealHighlight from 'revealjs-react/plugins/highlight';

render(
  <RevealJS plugins={[RevealHighlight]}>
    <Slide>
      <H size="1">Hello, World!</H>
    </Slide>
  </RevealJS>,
  document.querySelector('#root'),
);

Components

Look at src/components/ for a full list of supported components and their usage (coming soon).

Notes

The RevealJS components supports all the reveal.js config options through props

plugins = [],

// Display presentation control arrows
controls = true,

// Help the user learn the controls by providing hints, for example by
// bouncing the down arrow when they first encounter a vertical slide
controlsTutorial = true,

// Determines where controls appear, "edges" or "bottom-right"
controlsLayout = 'bottom-right',

// Visibility rule for backwards navigation arrows; "faded", "hidden"
// or "visible"
controlsBackArrows = 'faded',

// Display a presentation progress bar
progress = true,

// Display the page number of the current slide
// - true =    Show slide number
// - false =   Hide slide number
//
// Can optionally be set as a string that specifies the number formatting =
// - "h.v" =   Horizontal . vertical slide number (default)
// - "h/v" =   Horizontal / vertical slide number
// - "c" =   Flattened slide number
// - "c/t" =   Flattened slide number / total slides
//
// Alternatively, you can provide a function that returns the slide
// number for the current slide. The function should take in a slide
// object and return an array with one string [slideNumber] or
// three strings [n1,delimiter,n2]. See #formatSlideNumber().
slideNumber = false,

// Can be used to limit the contexts in which the slide number appears
// - "all" =      Always show the slide number
// - "print" =    Only when printing to PDF
// - "speaker" =  Only in the speaker view
showSlideNumber = 'all',

// Use 1 based indexing for # links to match slide number (default is zero
// based)
hashOneBasedIndex = false,

// Add the current slide number to the URL hash so that reloading the
// page/copying the URL will return you to the same slide
hash = false,

// Flags if we should monitor the hash and change slides accordingly
respondToHashChanges = true,

// Push each slide change to the browser history.  Implies `hash = true`
history = false,

// Enable keyboard shortcuts for navigation
keyboard = true,

// Optional function that blocks keyboard events when retuning false
//
// If you set this to 'foucsed', we will only capture keyboard events
// for embdedded decks when they are in focus
keyboardCondition = null,

// Disables the default reveal.js slide layout (scaling and centering)
// so that you can use custom CSS layout
disableLayout = false,

// Enable the slide overview mode
overview = true,

// Vertical centering of slides
center = true,

// Enables touch navigation on devices with touch input
touch = true,

// Loop the presentation
loop = false,

// Change the presentation direction to be RTL
rtl = false,

// Changes the behavior of our navigation directions.
//
// "default"
// Left/right arrow keys step between horizontal slides, up/down
// arrow keys step between vertical slides. Space key steps through
// all slides (both horizontal and vertical).
//
// "linear"
// Removes the up/down arrows. Left/right arrows step through all
// slides (both horizontal and vertical).
//
// "grid"
// When this is enabled, stepping left/right from a vertical stack
// to an adjacent vertical stack will land you at the same vertical
// index.
//
// Consider a deck with six slides ordered in two vertical stacks =
// 1.1    2.1
// 1.2    2.2
// 1.3    2.3
//
// If you're on slide 1.3 and navigate right, you will normally move
// from 1.3 -> 2.1. If "grid" is used, the same navigation takes you
// from 1.3 -> 2.3.
navigationMode = 'default',

// Randomizes the order of slides each time the presentation loads
shuffle = false,

// Turns fragments on and off globally
fragments = true,

// Flags whether to include the current fragment in the URL,
// so that reloading brings you to the same fragment position
fragmentInURL = true,

// Flags if the presentation is running in an embedded mode,
// i.e. contained within a limited portion of the screen
embedded = false,

// Flags if we should show a help overlay when the question-mark
// key is pressed
help = true,

// Flags if it should be possible to pause the presentation (blackout)
pause = true,

// Flags if speaker notes should be visible to all viewers
showNotes = false,

// Global override for autolaying embedded media (video/audio/iframe)
// - null =   Media will only autoplay if data-autoplay is present
// - true =   All media will autoplay, regardless of individual setting
// - false =  No media will autoplay, regardless of individual setting
autoPlayMedia = null,

// Global override for preloading lazy-loaded iframes
// - null =   Iframes with data-src AND data-preload will be loaded when within
//           the viewDistance, iframes with only data-src will be loaded when visible
// - true =   All iframes with data-src will be loaded when within the viewDistance
// - false =  All iframes with data-src will be loaded only when visible
preloadIframes = null,

// Can be used to globally disable auto-animation
autoAnimate = true,

// Optionally provide a custom element matcher that will be
// used to dictate which elements we can animate between.
autoAnimateMatcher = null,

// Default settings for our auto-animate transitions, can be
// overridden per-slide or per-element via data arguments
autoAnimateEasing = 'ease',
autoAnimateDuration = 1.0,
autoAnimateUnmatched = true,

// CSS properties that can be auto-animated. Position & scale
// is matched separately so there's no need to include styles
// like top/right/bottom/left, width/height or margin.
autoAnimateStyles = [
  'opacity',
  'color',
  'background-color',
  'padding',
  'font-size',
  'line-height',
  'letter-spacing',
  'border-width',
  'border-color',
  'border-radius',
  'outline',
  'outline-offset',
],

// Controls automatic progression to the next slide
// - 0 =      Auto-sliding only happens if the data-autoslide HTML attribute
//           is present on the current slide or fragment
// - 1+ =     All slides will progress automatically at the given interval
// - false =  No auto-sliding, even if data-autoslide is present
autoSlide = 0,

// Stop auto-sliding after user input
autoSlideStoppable = true,

// Use this method for navigation when auto-sliding (defaults to navigateNext)
autoSlideMethod = null,

// Specify the average time in seconds that you think you will spend
// presenting each slide. This is used to show a pacing timer in the
// speaker view
defaultTiming = null,

// Enable slide navigation via mouse wheel
mouseWheel = false,

// Opens links in an iframe preview overlay
// Add `data-preview-link` and `data-preview-link="false"` to customise each link
// individually
previewLinks = false,

// Exposes the reveal.js API through window.postMessage
postMessage = true,

// Dispatches all reveal.js events to the parent window through postMessage
postMessageEvents = false,

// Focuses body when page changes visibility to ensure keyboard shortcuts work
focusBodyOnPageVisibilityChange = true,

// Transition style
transition = 'slide', // none/fade/slide/convex/concave/zoom

// Transition speed
transitionSpeed = 'default', // default/fast/slow

// Transition style for full page slide backgrounds
backgroundTransition = 'fade', // none/fade/slide/convex/concave/zoom

// The maximum number of pages a single slide can expand onto when printing
// to PDF, unlimited by default
pdfMaxPagesPerSlide = Number.POSITIVE_INFINITY,

// Prints each fragment on a separate slide
pdfSeparateFragments = true,

// Offset used to reduce the height of content within exported PDF pages.
// This exists to account for environment differences based on how you
// print to PDF. CLI printing options, like phantomjs and wkpdf, can end
// on precisely the total height of the document whereas in-browser
// printing has to end one pixel before.
pdfPageHeightOffset = -1,

// Number of slides away from the current that are visible
viewDistance = 3,

// Number of slides away from the current that are visible on mobile
// devices. It is advisable to set this to a lower number than
// viewDistance in order to save resources.
mobileViewDistance = 2,

// The display mode that will be used to show slides
display = 'block',

// Hide cursor if inactive
hideInactiveCursor = true,

// Time before the cursor is hidden (in ms)
hideCursorTime = 5000,

// Parallax background image
parallaxBackgroundImage = '', // e.g. "https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg"

// Parallax background size
parallaxBackgroundSize = '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto)

// Number of pixels to move the parallax background per slide
// - Calculated automatically unless specified
// - Set to 0 to disable movement along an axis
parallaxBackgroundHorizontal = 200,
parallaxBackgroundVertical = 50,

// The "normal" size of the presentation, aspect ratio will
// be preserved when the presentation is scaled to fit different
// resolutions. Can be specified using percentage units.
width = 960,
height = 700,

// Factor of the display size that should remain empty around
// the content
margin = 0.04,

// Bounds for smallest/largest possible scale to apply to content
minScale = 0.2,
maxScale = 2.0,