Awesome
<img align="right" alt="traffic" src="https://pv-badge.herokuapp.com/total.svg?repo_id=olavoparno-react-use-presentation"/>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.
Statements | Branches | Functions | Lines |
---|---|---|---|
Table of Contents
Running example
Plain | Video BG |
---|---|
Preview! | Preview with BG video! |
You may also find a running example in this project which are served at Github Pages.
Install
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:
export const myFramesArray = [
{
component: <div>First Frame with 1 second duration</div>,
time: 1000
},
{
component: <div>Second Frame with 2 second duration</div>,
time: 2000
},
{
component: <div>Last Frame without duration</div>,
},
...
]
- To initialize a Presentation component:
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 <Presentation />;
}
- To initialize a delayed (in milliseconds) Presentation component:
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 <DelayedPresentation />;
}
- To initialize a delayed (in milliseconds) and also in loop Presentation component:
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 <DelayedAndLoopedPresentation />;
}
- To initialize multiple separated presentations and with its current frame and length:
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 (
<>
<Presentation />
<DelayedPresentation />
<div>
<p>
Current frame: {currentLoopFrame}/{loopFramesLength}
</p>
<DelayedAndLoopedPresentation />
</div>
</>
);
}
- You can also render elements as children (note that the component passed via array must support children):
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 (
<PresentationWithChildren>
<p>
Current frame: {currentFrame}/{framesLength}
</p>
</PresentationWithChildren>
);
}
- You can control when to start the presentation using
startTrigger
as a control. You can also specify a callback to when it finishes:
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 (
<>
<button type="button" onClick={() => setStartTrigger(true)}>
Click to start presenting!
</button>
<PresentationTriggered />
</>
);
}
Documentation
usePresentation()
constructor:
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:
- The very animation component;
- The current position of the frame (1 based);
- The total quantity of frames;
As the return is an array you may name each array position in an arbitrary way, e.g.:
const [MyLittleComponent, currentFrameLittle, totalLengthLittle] =
usePresentation();
CSS selectors
:
- Both frames with or without children have its own CSS selectors:
- Without children:
className="animation-frame"
- With children:
className="animation-frame with-children"
- You can also pass in your own className:
- With or without children:
const [PresentationCustomCss] = usePresentation({
framesOptions: myFramesArray1,
startTrigger: true,
});
return <PresentationCustomCss className="my-custom-class" />;
- The default behaviour is to automatically merge classNames.
Contributors
Thanks goes to these wonderful people (emoji key):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tr> <td align="center"><a href="https://olavoparno.github.io"><img src="https://avatars1.githubusercontent.com/u/7513162?v=4?s=70" width="70px;" alt=""/><br /><sub><b>Olavo Parno</b></sub></a><br /><a href="#ideas-olavoparno" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/the-bugging/react-use-presentation/commits?author=olavoparno" title="Code">💻</a> <a href="https://github.com/the-bugging/react-use-presentation/commits?author=olavoparno" title="Tests">⚠️</a></td> </tr> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->This project follows the all-contributors specification. Contributions of any kind welcome!
License
react-use-presentation is MIT licensed.
This hook is created using create-react-hook.