react-spriter v0.1.0

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

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