react-spriter
v0.1.0
Published
ReactSpriter is a React component that allows you to create animated sprites by providing a convenient interface
Downloads
6
Maintainers
Readme
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