react-sequence-player v1.1.0

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

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