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 |
|---|---|---|---|
 | | | |
| Plain | Video BG |
|---|---|
 |  |
| Preview! | Preview with BG video! |
You may also find a running example in this project which are served at Github Pages.
npm install --save react-use-presentation- 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
startTriggeras 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 /> </> ); }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.
Thanks goes to these wonderful people (emoji key):
 Olavo Parno 🤔 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
react-use-presentation is MIT licensed.
This hook is created using create-react-hook.