https://github.com/molefrog/presa
🎞 Make stylish presentations in React, powered by styled-components
https://github.com/molefrog/presa
deck presentation react slides
Last synced: 9 months ago
JSON representation
🎞 Make stylish presentations in React, powered by styled-components
- Host: GitHub
- URL: https://github.com/molefrog/presa
- Owner: molefrog
- Created: 2017-11-29T12:19:37.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-09T18:57:55.000Z (almost 8 years ago)
- Last Synced: 2025-07-01T10:48:57.236Z (10 months ago)
- Topics: deck, presentation, react, slides
- Language: JavaScript
- Homepage:
- Size: 1.9 MB
- Stars: 183
- Watchers: 5
- Forks: 12
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Present with joy in React. Minimal and self-contained framework for presentations built with `styled-components`.
Presa aims to be:
* **Lightweight.** No external css needed and as minimal dependencies as possible.
* **Extendable.** _Presa_ uses `styled-components` so almost all of its internal components can be extended and themized.
* **Modular.** Core barebone and building blocks are separated and may be optionally excluded from the presentation.
* **Aestetically pleasing.** Simple but functional UI, typography included.
Here is how Presa UI looks like:
[](http://molefrog.com/stateful-animations/)
List of currently supported features:
* Slideshow mode with optinonal table of the contents in a sidebar.
* Fullscreen API.
* Supports clicker and keyboard navigation.
* _Bird's eye_ view mode.
* Slides are _components_. They are not rendered until the slide is active.
### Getting started
Let's add a simple slide with a background.
```JavaScript
import { Presentation, Slide } from 'presa'
// No need to pass indexes here
const Deck = () => (
Let talk about JavaScript!
)
// Make sure you render into a full-page container
ReactDOM.render(, container)
```
If you do that in your app, Presa will run automatically.
### Contributing
Feel free to open issues and PRs! If you want to develop Presa locally you can test your features
by adding them to the demo deck inside the `demo/` folder. To open the development server run `yarn dev`.
The project uses [Prettier](https://prettier.io/) which runs automatically before every commit making
the code base consistent. See also [text editor integrations](https://prettier.io/docs/en/editors.html).