react-sequence-player

• Live Demo
• Image Sequence Player for ReactJS.
• Selectable Navgation Styles.
• What is Image Sprite?

Install

// npm
npm install react-sequence-player --save

// yarn
yarn add react-sequence-player

Usage

import SequencePlayer from 'react-sequence-player';
import SequenceImage from 'your sequence image';

const SomeComponent = () => {
    const playerRef = React.useRef(null);

    const handleControl = (action) => () => {
      switch (action) {
        case 'play': playerRef.current.play(); break;
        case 'pause': playerRef.current.pause(); break;
        case 'resume': playerRef.current.resume(); break;
        case 'reverse': playerRef.current.reverse(); break;
      }
    };

    return (
        <div>
            <button onClick={handleControl('play')}>PLAY</button>
            <button onClick={handleControl('pause')}>PAUSE</button>
            <button onClick={handleControl('resume')}>RESUME</button>
            <button onClick={handleControl('reverse')}>REVERSE PLAY</button>

            <SequencePlayer
                image={SampleImage}
                data={[
                    { x: -700, y: 0 },
                    { x: -600, y: 0 },
                    { x: -500, y: 0 },
                    { x: -400, y: 0 },
                    { x: -300, y: 0 },
                    { x: -200, y: 0 },
                    { x: -100, y: 0 },
                    { x: 0, y: 0 }
                ]}
                playerSize={{ width: 100, height: 230 }}
                imageSize={{ width: 800, height: 230 }}
                ref={playerRef}
            />
        </div>
    );
};

If You want to see more detail source,

• example/default.story.tsx
• example/delay.story.tsx

Props

|Name|Type|Required|Description|Default| |:--:|:--:|:-----:|:----------|:------| |image|String|Required|image resource|| |data|Array<{ x: number; y: number; }>|Required|image sequence position array[{ x: 0, y: 0 }, { x: 100, y: 0 }, { x: 100, y: 0 }]|| |playerSize|{ width: number; height: number; }|Required|image sprite contrainer(=div) size|| |imageSize|{ width: number; height: number; }|Required|image resource's size|0.5| |delay|Number|Optional|sequence update delay|50| |logging|Boolean|Optional|console logging in player component|false| |style|React.CSSProperties|Optional|style object for image sprite contrainer|undefined| |forMobile|Boolean|Optional|Toggle GPU Render|false| |onLoad|() => void|Optional|image onLoad event callback|undefined| |onStart|() => void|Optional|sequence event callback when started|undefined| |onPaused|() => void|Optional|sequence event callback when paused|undefined| |onComplete|() => void|Optional|sequence event callback when completed|undefined|

Development

directory & source

• ./example/ : storybook source for testing component
• ./src/ : component source
• ./dist/ : component distribution
• ./rollup.config.js : rollup configure.

scripts

// npm
npm run dev             // developing a component
npm run build           // build a component by rollup
npm run build:watch     // build watch mode

// yarn
yarn example
yarn build
yarn buidl:watch