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-spriteror
yarn add react-spriterUsage
- 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