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.

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

Bootstraps a new presentation project.

Example:

$ presenteer init my-deck

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.

Example of useKeyframes

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

Example with react-spring

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