react-spriter

This package is a work in progress!

React Spriter

React Spriter is a React component that allows you to create animated sprites using styled-components. It simplifies the process of animating sprites by providing a convenient interface to define sprite properties and animations.

DEMOS: https://react-spriter.callumeddisford.co.uk/

Build a game! Tell a story! Animate your icons!

Features

• Pause and play sprite
• Change sprite layer

Installation

To use ReactSpriter in your React project, you can install it via npm or yarn:

npm install react-spriter

or

yarn add react-spriter

Usage

• Import ReactSpriter into your component:

import ReactSpriter from "react-spriter";

• Use ReactSpriter in your component's render method:

class MyComponent extends React.Component {
  render() {
    return (
      <ReactSpriter
        sprite={sprite}
        spriteWidth={spriteWidth}
        frameWidth={frameWidth}
        frameHeight={frameHeight}
        elementWidth={elementWidth}
        duration={animationDuration}
        isInfinite={isInfinite}
        shouldAnimate={shouldAnimate}
        layer={layer}
      />
    );
  }
}

Props

Field	Type	Description
sprite	string	The URL of the sprite image.
frameWidth	number	The width of each frame in the sprite.
frameHeight	number	The height of each frame in the sprite.
elementWidth	number	(optional) Use this option to resize the sprite to a given pixel width, the element height is calculated automatically to mantain apsect ratio.
spriteWidth	number	The total width of the sprite image.
animationDuration	number	The duration of the animation in milliseconds.
isInfinite	boolean	Whether the animation should loop infinitely.
shouldAnimate	boolean	(optional) Whether the animation should start automatically. Defaults to true.
layer	number	(optional) The layer of the sprite animation. If multiple sprites are layered on top of each other, this value determines the order of rendering.

Examples

Here's an example of how you can use ReactSpriter to animate a sprite, in this example each frame width is 64 and the total sprite image width is 512 this indicates there are 8 frames to animate over:

import React from "react";
import ReactSpriter from "react-spriter";
import sprite from "path/to/sprite.png";

const MyComponent = () => {
  const spriteWidth = 512;
  const frameWidth = 64;
  const frameHeight = 64;
  const elementWidth= 50;
  const animationDuration = 1000;
  const isInfinite = true;
  const shouldAnimate = true;
  const layer = 0;

  return (
    <ReactSpriter
      sprite={sprite}
      spriteWidth={spriteWidth}
      frameWidth={frameWidth}
      frameHeight={frameHeight}
      elementWidth={elementWidth}
      duration={animationDuration}
      isInfinite={isInfinite}
      shouldAnimate={shouldAnimate}
      layer={layer}
    />
  );
};

export default MyComponent;

Please check out the src/examples directory for more

Local development

To start storybook locally:

  npm install
  npm run storybook