kodemonki/react-child-sequence

Plays a sequence of child image objects. It absolutely positions the remaining images over the top with visibility set to hidden. It then cycles through setting the visibility to visible for the current image.

Updates

• Changed frameRate prop to fps (frames per second) to make it less strange
• Added className and style object passing to children
• Removed dummy first image
• Added propTypes
• added defaultProps
• Added Es-lint to build
• Cleaned up function binding

Install

$ npm install @kodemonki/react-child-sequence

Props

autoPlay : boolean - play sequence
loop : boolean - repeat sequence
yoyo : boolean - replay in reverse
fps : number - frames per second

Usage

import { Sequence } from "@kodemonki/react-child-sequence";

//Images

import image1 from "./PathToImage1.jpg";
import image2 from "./PathToImage2.jpg";
import image3 from "./PathToImage3.jpg";

//Defaults

<Sequence>
  <img src={image1} />
  <img src={image2} />
  <img src={image3} />
</Sequence>

//Optional

<Sequence
    autoPlay={true}
    loop={true}
    yoyo={true}
    fps={29}
    style={...}
    className="className"
>
  <img src={image1} style={...} className="className" alt={"Alt text"}/>
  <img src={image2} style={...} className="className" alt={"Alt text"}/>
  <img src={image3} style={...} className="className" alt={"Alt text"}/>
</Sequence>