React-use-presentation NPM

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

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:
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.:

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" />;