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

1. Import ReactSpriter into your component:

import ReactSpriter from "react-spriter";

2. 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