webpack driven react slides framework
npm install wdrslides[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coverage Status][coveralls-badge]][coveralls]
Webpack Driven React Slides is a set of lightweight react
components to create presentations.
npm i -S wdrslides
or
yarn add wdrslides
wdrslides syntax is super simple. Your first presentation could be as simple as:
import React from 'react'
import {render} from 'react-dom'
import {
Presentation,
KeyboardControls,
Canvas,
Slide
} from 'wdrslides' // import the basic elements
const presentation = (
)
render(presentation, document.getElementById('root'))
Your index.html should look something like this:
The KeyboardControls component adds event listeners to key presses.
It allows navigation with the arrow, space and backspace keys.
Keyboard control doesn't do the trick for you?
Add navigation buttons like this:
Add styles to your index.html
.progressbar {
height: 5px;
background-color: #7dcbff;
transition: width 0.5s ease-in-out;
top: 100%;
position: absolute;
transform: translateY(-5px);
}
.navigation {
z-index: 999;
width: 100%;
text-align: right;
position: absolute;
top: 100%;
transform: translateY(-100%);
font-size: 1em;
}
See the demo branch of this repository.
If you wish to add external content to your slides you can use various loaders for webpack.
I recommend taking a look at markdown-loader and html-loader.
You can also extend wdrslides however you wish.
To get started you may want to look at the Progress components.
[build-badge]: https://img.shields.io/travis/konqi/wdrslides/master.png?style=flat-square
[build]: https://travis-ci.org/konqi/wdrslides
[npm-badge]: https://img.shields.io/npm/v/wdrslides.png?style=flat-square
[npm]: https://www.npmjs.org/package/wdrslides
[coveralls-badge]: https://coveralls.io/repos/github/konqi/wdrslides/badge.svg?branch=master
[coveralls]: https://coveralls.io/github/konqi/wdrslides?branch=master