Skip to content

Creates pure HTML or React presentations with a provided array of components and their time durations

License

Notifications You must be signed in to change notification settings

the-bugging/react-use-presentation

Repository files navigation

traffic

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


Statements Branches Functions Lines
Statements Branches Functions Lines

Table of Contents


Running example

Plain Video BG
Example Example
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:
  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:
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):


Olavo Parno

🤔 💻 ⚠️

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.