This package is currently under development. It's not recommended to create real presentations with it just yet. API may change or be removed without a notice in the work-in-progress stage.
Presenteer
Presenteer is a presentation engine that makes each presentation a piece of art.
Features
- No opinionated styling, use your favorite solution;
- Rich build-in themes to get started fast;
- React and its vast ecosystem at your disposal;
- Themes written in semantic HTML. Focus on presentation, not architecture;
- Surgical control over a slide's sub-state;
- Build to a JavaScript app, or a static website;
Quick start
$ npx presenteer init my-deck
Replace
my-deck
with the name of your talk. Presenteer will create that directory and bootstrap a new presentation in it.
Once the command finishes, navigate to the presentation's directory and run:
$ npm start
This would spawn a local preview server. Create a great presentation!
Manual installation
Install
npm install presenteer
Create slides
In Presenteer each slide is a React component. Let's start by creating a single slide:
// slides/SlideOne.jsx
import React from 'react'
import { Slide } from 'presenteer'
const SlideOne = () => (
<Slide>
<h1>First slide</h1>
</Slide>
)
export default SlideOne
Once your slides are ready, finish by creating a master slide:
// MasterSlide.jsx
import React from 'react'
import { Provider } from 'presenteer'
import SlideOne from './slides/SlideOne'
// Inculde the theme
import 'presenteer/build/themes/default.css'
const MasterSlide = () => (
<Provider>
<SlideOne />
</Provider>
)
export default MasterSlide
Each slide must be a direct child of the <Provider/>
component in order for the engine to render slides in correspondence to the active slide index.
Run the presentation
Use the view
CLI command to run your presentation:
For example, to preview the master slide at ./MasterSlide.jsx
you would have to run:
$ presenteer view ./MastereSlide.jsx
CLI
init <PROJECT_NAME>
Bootstraps a new presentation project.
Example:
$ presenteer init my-deck
view <MASTER_SLIDE> [options]
Launches a local preview server for the given presentation. Meant for developing a presentation.
Arguments
Name | Type | Description |
---|---|---|
MASTER_SLIDE |
string |
A file path to the master slide relative to the current working directory. |
Options
Name | Type | Description |
---|---|---|
port |
number |
A custom port number for the preview server. |
webpackConfig |
string |
A file path to the custom webpack configuration to merge with the Presenteer's default configuration. |
Example:
$ presenteer view ./MasterSlide.jsx --port 8080
Components
Provider
import { Provider } from 'presenteer'
A provider component for the entire presentation deck. Responsible for slides' rendering and navigation.
Props
Name | Type | Required | Description |
---|---|---|---|
extra |
React.FC |
false |
A React component to render alognside each slide. Useful for fixed headers/footers with a presenter's information. |
Recipes
Programatic slides navigation
In order to navigate between slides programatically, use the useNavigation
hook.
Type definition
type UseNavigation = () => UseNavigationAPI
interface UseNavigationAPI {
prev: NavigationFunc
next: NavigationFunc
goto: GotoFunc
}
type NavigationFunc = () => void
type GotoFunc = (slideNumber: number, keyframeNumber?: number) => void
Example of programatic navigation
import { Provider, Slide, useNavigation } from 'presenteer'
const MyDeck = () => (
<Provider>
<SlideOne />
<SlideTwo />
</Provider>
)
const SlideOne = () => {
const { next } = useNavigation()
return (
<Slide>
<h1>Slide one</h1>
<button onClick={next}>Go to the next slide</button>
</Slide>
)
}
const SlideTwo = () => {
const { prev } = useNavigation()
return (
<Slide>
<h1>Slide two</h1>
<button onClick={prev}>Go to the previous slide</button>
</Slide>
)
}
Keyframes
Each slide can have a set of keyframes, that act like a sub-slide.
Keyframes is a powerful slide state management tool that allows to change a slide's context over navigation, and bind anything to the navigation state (i.e. animations or content).
Basic concepts
- Keyframes can be navigated the same way as slides;
- Keyframes are reproducible, meaning any keyframe can be directly accessed at any point of time;
- By default, each slide has exactly 1 keyframe;
- The first keyframe is the initial state of a slide;
Type definition
type UseKeyframes<V> = (...Array<V>) => V
useKeyframes
is exported as a React Hook. All React Hooks rules apply.
useKeyframes
Example of import React from 'react'
import { Provider, Slide, useKeyframes } from 'presenteer'
const MyPresentation = () => (
<Provider>
<SlideOne />
</Provider>
)
const SlideOne = () => {
const text = useKeyframes(['first you see me', 'then me', 'and, finally, me'])
return (
<Slide>
<p>Some things never change</p>
<p>{text}</p>
</Slide>
)
}
react-spring
Example with import React from 'react'
import { Provider, Slide, useKeyframes } from 'presenteer'
import { useSpring, animated } from 'react-spring'
const MyPresentation = () => (
<Provider>
<SlideOne />
</Provider>
)
const SlideOne = () => {
const animationState = useKeyframes([
{
// First keyframe (initial)
color: 'black',
background: 'red',
},
{
// Second keyframe
color: 'white',
// Note that we preserve the previous "background" value
// so that this keyframe can be rendered standalone.
background: 'red',
},
{
color: 'green',
background: 'blue',
},
])
const styles = useSpring(animationState)
return (
<Slide>
<animated.div style={styles}>Text</animated.div>
</Slide>
)
}
Custom webpack configuration
Presenteer comes with the sensible default webpack setup to handle ES modules, styles, and images. However, you may want to extend the default configuration depending on your needs.
Create a partial custom webpack configuration:
// webpack.config.js
module.exports = {
module: {
rules: [
{
// This example enables SCSS support
test /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
}
Your custom webpack configuration is merged with the default one using
webpack-merge
.
Launch the Presenteer and point it to your custom webpack config using the webpackConfig
flag:
$ presenteer view ./MasterSlide.jsx --webpackConfig=webpack.config.js