react-use-presentation

react-use-presentation

Create pure HTML (React enriched if you will) presentations.

Preview here!

Preview with background video here!

---

Table of Contents

• Running example
• Install
• Usage
• Documentation
• License

---

Running example

Plain	Video BG

---

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 });

  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,
    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,
    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';

export default function App() {
  const [Presentation] = usePresentation({ framesOptions: myFramesArray1 });
  const [DelayedPresentation] = usePresentation({ framesOptions: myFramesArray2, startDelay: 1000 });
  const [DelayedAndLoopedPresentation, currentLoopFrame, loopFramesLength] = usePresentation({ framesOptions: myFramesArray3, startDelay: 1000, isLoop: true });

  return (
    <>
      <Presentation />
      <DelayedPresentation />
      <div>
        <p>Current frame: {currentLoopFrame}/{loopFramesLength}</p>
        <DelayedAndLoopedPresentation />
      </div>
    </>
  )
}

---

Documentation

usePresentation() constructor:

type TFrameOptions = {
  component: Component | null,
  time?: number
}

type TUsePresentation = {
  framesOptions: Array<TFrameOptions>,
  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();

---

License

react-use-presentation is MIT licensed.

---

This hook is created using create-react-hook.

Changelog

1.1.0 (2021-02-11)

Features

• project: add new info from the hook (2650a19)