# react-present
> A simple, lightweight framework for creating presentations quickly using React components for slides.
Latest version **0.2.1** (published 2017-07-13) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-present
pnpm add react-present
yarn add react-present
bun add react-present
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.2.1 |
| Published | 2017-07-13 |
| First published | 2016-04-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 13 |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| Author | Dave Thompson |
| Maintainers | limscoder |
| Keywords | react, presentation |
## Links
- npm: https://www.npmjs.com/package/react-present
- Repository: https://github.com/limscoder/react-present
- Homepage: https://github.com/limscoder/react-present#readme
- Issues: https://github.com/limscoder/react-present/issues
- npm.io page: https://npm.io/package/react-present
## Dependencies (13)
- [brace](https://npm.io/package/brace.md) ^0.5.1
- [react](https://npm.io/package/react.md) ^15.6.1
- [glamor](https://npm.io/package/glamor.md) ^3.0.0-2
- [pubnub](https://npm.io/package/pubnub.md) ^3.7.18
- [history](https://npm.io/package/history.md) ^3.3.0
- [markdown](https://npm.io/package/markdown.md) ^0.5.0
- [glamorous](https://npm.io/package/glamorous.md) ^3.23.5
- [react-ace](https://npm.io/package/react-ace.md) ^3.4.1
- [react-dom](https://npm.io/package/react-dom.md) ^15.6.1
- [classnames](https://npm.io/package/classnames.md) ^2.1.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [react-router](https://npm.io/package/react-router.md) ^3.0.5
- [react-addons-css-transition-group](https://npm.io/package/react-addons-css-transition-group.md) ^15.0.2
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 0.2.1 (latest) — 2017-07-13
- 0.2.0 — 2017-07-10
- 0.1.0 — 2016-05-03
- 0.0.2 — 2016-04-22
- 0.0.1 — 2016-04-22
## README
# react-present
A lightweight framework for creating presentations using simple React components.
Keyboard, mouse, gui, and url navigation between slides via [react-router](https://reactrouter.com/). Code highlighting and editing via [react-ace](https://github.com/securingsincity/react-ace). Presentation app can be viewed entirely from static files without running a webserver, and can be easily hosted via [github pages](https://pages.github.com/).
Presentations can be controlled from a mobile device with the [remote control app](remote/README.md).
## Presentations
* [Example presentation](https://limscoder.github.io/react-present/example/)
* [Conference presentations made with react-present](https://github.com/limscoder/present)
* [See it in action (video)](https://youtu.be/Sb9fRAKdjkQ)
## View example presentation locally
Recommended node/npm version (configure with [nvm](https://github.com/nvm-sh/nvm)): `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`.
```javascript
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: [
Use pre-built components like "Title"
,
Use standard HTML components
,
Include an image
]
});
```
## Style slides
I recommend using [glamorous](https://github.com/paypal/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 = (
const foo = 'bar';
);
## 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](https://help.github.com/en/github/working-with-github-pages/creating-a-github-pages-site). The presentation is also packaged in a `.zip` file within the `docs` directory for easy sharing.
---
_Source: https://npm.io/package/react-present · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._