Northern Pileated Marmoset

    presenteer
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.1 • Public • Published

    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

    Slide one

    Bootstraps a new presentation project.

    Example:

    $ presenteer init my-deck

    Slide one

    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

    Keywords

    none

    Install

    npm i presenteer

    DownloadsWeekly Downloads

    1

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    81.2 kB

    Total Files

    27

    Last publish

    Collaborators

    • kettanaito