Package Exports

react-responsive-spritesheet

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-responsive-spritesheet) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Responsive Spritesheet

React component which helps you to easily apply responsive spritesheet animations on your project.

Installation

$ npm install react-responsive-spritesheet --save

Usage

Simple usage with required parameters

import Spritesheet from 'react-responsive-spritesheet';

class App extends Component {

  render() {

    return (
        <Spritesheet
          image={`http://www.example.com/assets/image.png`}
          widthFrame={800}
          heightFrame={648}
          steps={46}
          fps={12}
          orientation={`horizontal`}
        />
    );

  }

}

Complete usage with all parameters

import Spritesheet from 'react-responsive-spritesheet';

class App extends Component {

  render() {

    return (
        <Spritesheet
          className={`my-element__class--style`}
          style={{ backgroundColor: 'red' }}
          image={`http://www.example.com/assets/image.png`}
          widthFrame={800}
          heightFrame={648}
          steps={46}
          fps={12}
          orientation={`horizontal`}
          timeout={1800}
          autoplay={false}
          loop={true}
          background={`http://www.example.com/assets/image.png`}
          backgroundSize={`cover`}
          backgroundRepeat={`no-repeat`}
          backgroundPosition={`center center`}
          getInstance={instance => {
            this.spriteInstance = instance;
          }}
          onClick={() => {
            this.spriteInstance.play();
          }}
          onDoubleClick={() => {
            this.spriteInstance.pause();
          }}
          onMouseMove={() => {
            console.log('onMouseMove');
          }}
          onMouseEnter={() => {
            console.log('onMouseEnter');
          }}
          onMouseLeave={() => {
            console.log('onMouseLeave');
          }}
          onMouseOver={() => {
            console.log('onMouseOver');
          }}
          onMouseOut={() => {
            console.log('onMouseOut');
          }}
          onMouseDown={() => {
            console.log('onMouseDown');
          }}
          onMouseUp={() => {
            console.log('onMouseUp');
          }}
        />
    );

  }

}

Options

Required	Parameter	Type	Example	Description
	className	`string`	'my-element__class--style'	Apply a classname for spritehseet container
	style	`object`	{ backgroundColor: 'red', display: 'flex' }	Apply inline style for spritehseet container
✓	image	`string`	'http://yyy.com/image.png'	URL or path for image to animate
✓	widthFrame	`number`	800	Original width of each frame, in pixels
✓	heightFrame	`number`	800	Original height of each frame, in pixels
✓	steps	`number`	47	Total frames / steps animation
✓	fps	`number`	12	Velocity / Animation frames per second
✓	orientation	`string`	'horizontal'	'horizontal' or 'vertical' frames orientation on sprite image
	timeout	`number`	1200	Delay for start animating. The 'autoplay' option must be true
	autoplay	`boolean`	false	Determines if animation starts automatically
	loop	`boolean`	false	Determines if animation replay on end
	background	`string`	'/assets/background.png'	URL or path for background image placed behind animation
	backgroundSize	`string`	'cover'	Style for background image
	backgroundRepeat	`string`	'no-repeat'	Style for background image
	backgroundPosition	`string`	'center center'	Style for background image
	getInstance	`callback`		Return callback instance for spritesheet controls
	onClick	`function`		Provides action onClick for spritesheet container
	onDoubleClick	`function`		Provides action onDoubleClick for spritesheet container
	onMouseMove	`function`		Provides action onMouseMove for spritesheet container
	onMouseEnter	`function`		Provides action onMouseEnter for spritesheet container
	onMouseLeave	`function`		Provides action onMouseLeave for spritesheet container
	onMouseOver	`function`		Provides action onMouseOver for spritesheet container
	onMouseOut	`function`		Provides action onMouseOut for spritesheet container
	onMouseDown	`function`		Provides action onMouseDown for spritesheet container
	onMouseUp	`function`		Provides action onMouseUp for spritesheet container