rp

react-present

A simple framework for creating presentations using React components for slides. react-native remote control for phone based slide control.

Showing:

Popularity

Downloads/wk

5

GitHub Stars

51

Maintenance

Last Commit

2yrs ago

Contributors

13

Package

Dependencies

13

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-present

A lightweight framework for creating presentations using simple React components.

Keyboard, mouse, gui, and url navigation between slides via react-router. Code highlighting and editing via react-ace. Presentation app can be viewed entirely from static files without running a webserver, and can be easily hosted via github pages.

Presentations can be controlled from a mobile device with the remote control app.

Presentations

View example presentation locally

Recommended node/npm version: 8.*/6.*.

> git clone https://github.com/limscoder/react-present.git
> npm install
> npm start

Open http://localhost:9001 in a browser.

Create a presentation

Create a new git repo for your presentation.

> mkdir {your-presentation-repo}
> git init {your-presentation-repo}

Copy the example presentation into your presentation repo.

> cp -r presentations/example {your-presentation-repo}/{your-presentation-name}
> npm run build-dev {your-presentation-repo}/{your-presentation-name}

Navigate to http://localhost:9001 in your browser. Changes made to {your-presentation-repo}/{your-presentation-name}/index.js will be hot-loaded into the browser.

Customize a presentation

Customize the slides defined in index.js.

import React from 'react';
import { renderPresentation } from 'react-present';
import { Slide, Title } from 'react-present/components/content';

import imgSrc from './images/bikes.gif'

renderPresentation({
  title: 'Example Presentation',
  align: 'top',
  slides: [
    <Slide>
      <Title>Use pre-built components like "Title"</Title>
    </Slide>,
    <Slide>
      <p>Use standard HTML components</p>
    </Slide>,
    <Slide>
      <Title>Include an image</Title>
      <img src={ imgSrc } alt="image" />
    </Slide>
  ]
});

Style slides

I recommend using glamorous to style slides, but standard CSS can also be imported from within slide source code.

import './my-slide-styles.css';

Use the CodeBlock component to get syntax highlighting and code editing.

import CodeBlock from 'react-present/components/CodeBlock';

const block = (
  <CodeBlock>
    const foo = 'bar';
  </CodeBlock>
);

Publish a presentation

> npm run build {your-presentation-repo}/{your-presentation-name}

The build command will create a docs directory containing index.html and all required resources for your presentaion. Open index.html in a browser to display your presentation locally. Commit the docs directory to your git repo and host your presentation with github pages. The presentation is also packaged in a .zip file within the docs directory for easy sharing.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial