Home

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.

NPM


StatementsBranchesFunctionsLines
StatementsBranchesFunctionsLines

Table of Contents


Running example

PlainVideo BG
ExampleExample
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

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>,
  },
  ...
]
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 />;
}
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 />;
}
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 />;
}
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>
    </>
  );
}
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>
  );
}
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:

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:

  1. Without children: className="animation-frame"
  2. With children: className="animation-frame with-children"
  1. With or without children:
const [PresentationCustomCss] = usePresentation({
  framesOptions: myFramesArray1,
  startTrigger: true,
});

return <PresentationCustomCss className="my-custom-class" />;

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.