Updated to include usage

README.md

@@ -1,2 +1,309 @@
 # revealjs-react
+
 A React wrapper for the RevealJS Presentation Library.
+
+## Usage
+
+```jsx
+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/](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
+
+```js
+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,
+```