Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/the-bugging/react-use-presentation
Creates pure HTML or React presentations with a provided array of components and their time durations
https://github.com/the-bugging/react-use-presentation
animation frame frames hook html5 powerpoint ppt pptx presentation react slide typescript
Last synced: 8 days ago
JSON representation
Creates pure HTML or React presentations with a provided array of components and their time durations
- Host: GitHub
- URL: https://github.com/the-bugging/react-use-presentation
- Owner: the-bugging
- License: mit
- Created: 2021-02-09T17:23:34.000Z (almost 4 years ago)
- Default Branch: develop
- Last Pushed: 2023-03-09T02:27:53.000Z (almost 2 years ago)
- Last Synced: 2025-01-03T01:18:10.787Z (12 days ago)
- Topics: animation, frame, frames, hook, html5, powerpoint, ppt, pptx, presentation, react, slide, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-use-presentation
- Size: 27.7 MB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-use-presentation
> Create pure HTML (React enriched if you will) presentations with a provided array of components and their time durations. The library will do the rest triggering a re-render per array item.
[](https://www.npmjs.com/package/react-use-presentation)
---
| Statements | Branches | Functions | Lines |
| ----------------------------------------------------------------------------- | ------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------- |
|  |  |  |  |
## Table of Contents
- [Running example](#running-example)
- [Install](#install)
- [Usage](#usage)
- [Documentation](#documentation)
- [Contributors](#contributors)
- [License](#license)
---
## Running example
| Plain | Video BG |
| ----------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
|  |  |
| [Preview!](https://codesandbox.io/s/react-use-presentation-1c2du) | [Preview with BG video!](https://codesandbox.io/s/react-use-presentation-with-bg-d7f7j) |
> You may also find a running [example](./example) in this project which are served at [Github Pages](https://olavoparno.github.io/react-use-presentation).
---
## Install
```bash
npm install --save react-use-presentation
```
---
## Usage
- Set up your presentation array with each object acting as a movie frame. See the example and contract below:
```tsx
export const myFramesArray = [
{
component:
First Frame with 1 second duration,
time: 1000
},
{
component: Second Frame with 2 second duration,
time: 2000
},
{
component: Last Frame without duration,
},
...
]
```
- To initialize a Presentation component:
```tsx
import * as react from 'react';
import usePresentation from 'react-use-presentation';
import { myFramesArray1 } from './myFramesArray';
export default function App() {
const [Presentation] = usePresentation({
framesOptions: myFramesArray1,
startTrigger: false,
});
return ;
}
```
- To initialize a **delayed** (in milliseconds) Presentation component:
```tsx
import * as react from 'react';
import usePresentation from 'react-use-presentation';
import { myFramesArray2 } from './myFramesArray';
export default function App() {
const [DelayedPresentation] = usePresentation({
framesOptions: myFramesArray2,
startTrigger: true,
startDelay: 1000,
});
return ;
}
```
- To initialize a **delayed** (in milliseconds) and also in **loop** Presentation component:
```tsx
import * as react from 'react';
import usePresentation from 'react-use-presentation';
import { myFramesArray3 } from './myFramesArray';
export default function App() {
const [DelayedAndLoopedPresentation] = usePresentation({
framesOptions: myFramesArray3,
startTrigger: true,
startDelay: 1000,
isLoop: true,
});
return ;
}
```
- To initialize multiple separated presentations and with its current frame and length:
```tsx
import * as react from 'react';
import usePresentation from 'react-use-presentation';
import {
myFramesArray1,
myFramesArray2,
myFramesArray3,
} from './myFramesArray';
export default function App() {
const [Presentation] = usePresentation({
framesOptions: myFramesArray1,
startTrigger: false,
});
const [DelayedPresentation] = usePresentation({
framesOptions: myFramesArray2,
startTrigger: true,
startDelay: 1000,
});
const [DelayedAndLoopedPresentation, currentLoopFrame, loopFramesLength] =
usePresentation({
framesOptions: myFramesArray3,
startTrigger: true,
startDelay: 1000,
isLoop: true,
});
return (
<>
Current frame: {currentLoopFrame}/{loopFramesLength}
>
);
}
```
- You can also render elements as children (note that the component passed via array must support children):
```tsx
import * as react from 'react';
import usePresentation from 'react-use-presentation';
import { myFramesArray1 } from './myFramesArray';
export default function App() {
const [PresentationWithChildren, currentFrame, framesLength] =
usePresentation({
framesOptions: myFramesArray1,
startTrigger: true,
});
return (
Current frame: {currentFrame}/{framesLength}
);
}
```
- You can control when to start the presentation using `startTrigger` as a control. You can also specify a callback to when it finishes:
```tsx
import * as react from 'react';
import usePresentation from 'react-use-presentation';
import { myFramesArray1 } from './myFramesArray';
export default function App() {
const [startTrigger, setStartTrigger] = React.useState(false);
const [PresentationTriggered] = usePresentation({
framesOptions: myFramesArray1,
startTrigger,
callback: () => setStartTrigger(false),
});
return (
<>
setStartTrigger(true)}>
Click to start presenting!
>
);
}
```
---
## Documentation
`usePresentation()` constructor:
```tsx
type TFrameOptions = {
component: Component | null;
time?: number;
};
type TUsePresentation = {
framesOptions: TFrameOptions[];
startTrigger: boolean;
startDelay?: number;
isLoop?: boolean;
};
usePresentation(TUsePresentation);
```
`usePresentation()` returns:
- An array with 3 positions, described below:
1. The very animation component;
2. The current position of the frame (1 based);
3. The total quantity of frames;
> As the return is an array you may name each array position in an arbitrary way, e.g.:
```tsx
const [MyLittleComponent, currentFrameLittle, totalLengthLittle] =
usePresentation();
```
`CSS selectors`:
- Both frames with or without children have its own CSS selectors:
1. Without children: `className="animation-frame"`
2. With children: `className="animation-frame with-children"`
- You can also pass in your own className:
1. With or without children:
```tsx
const [PresentationCustomCss] = usePresentation({
framesOptions: myFramesArray1,
startTrigger: true,
});
return ;
```
- **The default behaviour is to automatically merge classNames.**
---
## Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
---
## License
react-use-presentation is [MIT licensed](./LICENSE).
---
This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).
