Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bouzidanas/react-reveal-slides
Create and add reveal.js presentations in react
https://github.com/bouzidanas/react-reveal-slides
reactjs revealjs typescript
Last synced: 4 days ago
JSON representation
Create and add reveal.js presentations in react
- Host: GitHub
- URL: https://github.com/bouzidanas/react-reveal-slides
- Owner: bouzidanas
- License: mit
- Created: 2024-01-30T16:42:37.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2024-08-27T01:02:00.000Z (4 months ago)
- Last Synced: 2024-12-18T19:51:30.289Z (8 days ago)
- Topics: reactjs, revealjs, typescript
- Language: CSS
- Homepage:
- Size: 33.6 MB
- Stars: 35
- Watchers: 1
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-reveal-slides
Create and add reveal.js HTML presentations entirely in react!
## Overview
- Add multiple slide decks to your React app
- Embed React components inside presentations
- By default, presentation content can be written entirely in JSX
- Dynamically alter presentation content
- Dynamically change configuration options. Supports all config options. Change theme, transition, and more
- Control slide state from outside the presentation
- Via props
- Via Reveal.js API accessed through refs
- Includes slide state change callback
- Accepts Reveal.js plugins
## Installation
This package is still in development and not yet published to npm. You can install it directly from github:
```bash
npm install reveal.js bouzidanas/react-reveal-slides
```
and to get types for typescript
```bash
npm i --save-dev @types/reveal.js
```
## Usage
```tsx
import { RevealSlides } from "react-reveal-slides"
// Make sure reveal.js is installed with npm for the following imports to work
// Plugins
import RevealNotes from 'reveal.js/plugin/notes/notes';
import RevealZoom from 'reveal.js/plugin/zoom/zoom';
function App() {
return (
console.log(state)}>
react-reveal-slides
Create dynamic Reveal.js slides
- Easily make presentation content dynamic
- Easily add presentations to React apps
- Embed React components inside presentations
Free reign over your presentation
This package makes no efforts to impead or restrict what you can do.
Since React creates HTML DOM elements out of JSX, there should be no reason we cant just put JSX inside of our RevealSlides component instead of the HTML markup Reveal.js normally expects.
Simply put, React already takes care of converting JSX into something Reveal.js can work with.
Shhh, these are your private notes 📝
)
}
export default App
```
### Themes
Reveal.js comes with a variety of themes including: `black`, `white`, `league`, `beige`, `sky`, `night`, `serif`, `simple`, `solarized`, `blood`, `moon`, and `night`.
To use a theme, you can import the desired Reveal.js theme css file in your project. For example, to use the `black` theme, you can import the css file like so:
```tsx
import 'reveal.js/dist/theme/black.css'
// or alternatively
import '../node_modules/reveal.js/dist/theme/black.css'
```
To use any of the other themes, simply replace `black` with the desired theme name.
### Tips
#### Dimensions
By default, the RevealSlides component will take up the entire width and height of its parent container. If you want to change the dimensions of the presentation, you can do so by changing the width and height of the parent container.
If you do not see the presentation, one thing to check is the dimensions of the parent container.
#### Data attributes
`data-` attributes can be added in JSX (as props) same as how you would in markup except in the case of boolean data attributes. In that case, you must set the value to an empty string. For example, `data-markdown` should be `data-markdown=""` in JSX.
# License
[](https://github.com/bouzidanas/react-reveal-slides/blob/master/LICENSE)