https://github.com/sambego/diorama
A set of React.js components to create easy en extendable presentations.
https://github.com/sambego/diorama
diorama presentation presentations react reactjs slides
Last synced: about 1 year ago
JSON representation
A set of React.js components to create easy en extendable presentations.
- Host: GitHub
- URL: https://github.com/sambego/diorama
- Owner: Sambego
- Created: 2018-12-06T15:10:59.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-03-11T07:55:56.000Z (about 1 year ago)
- Last Synced: 2025-04-12T07:59:22.146Z (about 1 year ago)
- Topics: diorama, presentation, presentations, react, reactjs, slides
- Language: JavaScript
- Homepage: https://sambego.github.io/diorama-demo/index.html
- Size: 1.48 MB
- Stars: 20
- Watchers: 2
- Forks: 3
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Diorama
Diorama is a set of React.js components to easily create an attractive and customisable presentation. All content will adjust to the available width of the screen, so you won't have some clipped slides when forced to present with a projector of lesser quality.
Why would you create a presentation in React.js instead of powerpoint, keynote or Google Slides? You can add live demos, straight in your slides. Since every slide is a react component, there's no limit to what you can do.
You can navigate trough the slides by using the arrow keys on your keyboard, using a presenter remote\* or swiping trough the slides on a mobile phone. By adding the `navigation` property to the `` component you can enable an onscreen navigation.
\* Tested with a Logitech R400 and Logitech Spotlight
## Demo
Check out the demo right here https://sambego.github.io/diorama-demo/
## Installing
```
npm install @sambego/diorama
```
or
```
yarn add @sambego/diorama
```
## Usage
Once you have the components installed trough NPM, you can import them in your react project.
```javascript
import React from 'react';
import { Deck, Slide, Title, Text } from '@sambego/diorama';
const MyApp = () => {
return (
This is the title of my presentation
A witty joke to start off the presentation
);
};
```
## Available components
### Summary
- [Deck](#deck)
- [Slide](#slide)
- [Title](#title)
- [Subtitle](#subtitle)
- [Text](#text)
- [Highlight](#highlight)
- [Quote](#quote)
- [Image](#image)
- [List](#list)
- [Columns](#columns)
- [Code](#code)
- [Browser](#browser)
### Deck
This is the root element of each presentation, it will handle navigation trough the slides. It accepts some properties.
- `navigation`: when this property is present, an onscreen navigation will render on top of every slide (previous and next arrow);
- `presenterNotes`: Setting this property will open a new window with presenter notes on bootstrap or on reload.
- `footer`: Any valid react element, which will render with every slide. by default there is a `` available.
```javascript
...
```
```javascript
const footer =
...
```
### Slide
Even though the `` component accepts all valid React nodes as children, the `` component will make sure all content is displayed using the full width and height available.
```javascript
Slide content
```
The slide component will accept a `note` attribute, which will display presenter notes in the presenter notes window.
```javascript
Slide content
```
### Title
```javascript
This is a title
```
### Subtitle
```javascript
This is a subtitle
```
### Text
```javascript
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
```
### Highlight
```javascript
This it a title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
```
### Quote
```javascript
Lorem ipsum dolor sit amet
```
### Image
```javascript
```
The `Image` component accepts a few attributes.
Using the `full` attribute, the image will take up all available space.
```javascript
```
Using the `color="#fff"` attribute, the image will have an overlay color.
```javascript
```
By default the images will display using `object-fit: cover;`, this might cut of some of the top or sides. By setting the `contain` attribute they will display in completely.
```javascript
```
### Video
The `Video` component accepts the same `full` and `color` properties as images. There are some other properties to control the video player.
Setting the autoplay property will start the video playback on load.
```javascript
```
Using the `loop` property will play the video in a continuous loop.
```javascript
```
### List
#### Ordered lists
```javascript
```
#### Unordered lists
```javascript
```
### Columns
You can add as many child nodes as you want and they will be displayed in nice equal columns.
```javascript
```
### Code
This component accepts 2 attributes, `code` which is a string of the code to display, and `lang` which default to `javascript`.
```javascript
```
> The code is formatted using the amazing [Prism.js library](https://prismjs.com/). If you need a language which is not included in the Prism.js default set of languages, you can import it **after** you've imported the `` component.
```javascript
import { Slide, Code } from '@sambego/diorama';
import 'prismjs/components/prism-bash.min.js';
const CodeExample = () => (
);
```
### Browser
> Note: Loading mixed content might not work when not using https
```javascript
```
## Customisation
By default, all components are good lookingShould you want customise the look of a component, you can easily add some custom styles.
### Overwrite the color variables
The easiest way to get some color customisation is to overwrite the color CSS variables. The default color scheme is based on oceanic next. These are the default color variables.
```css
:root {
--color-gray-0: #1b2b34;
--color-gray-1: #343d46;
--color-gray-2: #4f5b66;
--color-gray-3: #65737e;
--color-gray-4: #a7adba;
--color-gray-5: #c0c5ce;
--color-gray-6: #cdd3de;
--color-gray-7: #d8dee9;
--color-gray-dark: var(--color-gray-0);
--color-gray-medium: var(--color-gray-4);
--color-gray-light: var(--color-gray-7);
--color-red: #ec5f67;
--color-orange: #f99157;
--color-yellow: #fac863;
--color-green: #99c794;
--color-teal: #5fb3b3;
--color-blue: #6699cc;
--color-pink: #c594c5;
--color-brown: #ab7967;
--color-primary: var(--color-green);
--color-seconday: var(--color-teal);
--color-danger: var(--color-red);
--color-success: var(--color-green);
--color-info: var(--color-blue);
--color-warning: var(--color-yellow);
}
```
### Use the `.diorama-*` classes
All components have a `.diorama-*` class, which you can use to add extra CSS to them.
Eg. `.diorama-slide`, `.diorama-title`, `.diorama-code`, ...
### Add an extra CSS class
You can add extra CSS classes by simply passing a `className` property to a component.
```javascript
...
```
### Add inline styles
It is also possible to pass some inline styles to each component.
```javascript
...
```
## Navigating between Slides
If you want to navigate between slides using code, all of the children of the `Deck` component have a `navigate()` method injected. You can use this method to navigate to another slide. The navigate function accepts the index of the slide to navigate to as a parameter.
```javascript
const FirstSlide = ({ navigate }) => {
const handleGoToLastSlide = event => {
event.preventDefault();
navigate(1);
};
return (
Go to the last slide
);
};
const LastSlide = ({ navigate }) => {
const handleGoToFirsttSlide = event => {
event.preventDefault();
navigate(0);
};
return (
Go to the first slide
);
};
;
```