https://github.com/jcblw/react-sprite-animator
A React component that animates simple spritesheets
https://github.com/jcblw/react-sprite-animator
animates sprites
Last synced: about 1 year ago
JSON representation
A React component that animates simple spritesheets
- Host: GitHub
- URL: https://github.com/jcblw/react-sprite-animator
- Owner: jcblw
- License: isc
- Created: 2016-02-13T18:48:13.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-04-03T14:00:21.000Z (about 3 years ago)
- Last Synced: 2025-04-09T21:16:27.013Z (about 1 year ago)
- Topics: animates, sprites
- Language: JavaScript
- Size: 1.84 MB
- Stars: 85
- Watchers: 2
- Forks: 21
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Sprite Animator
This is a component that animates through an image sprite.
- [Animated Heart Example](http://react-sprite-animator.surge.sh/)
### Install
```shell
npm i react-sprite-animator -S
# or
yarn add react-sprite-animator
```
**React** is used with this library but do not come bundled with this library. Please make sure you have those installed before using.
### Usage
You are able to use this library as a component or as a hook.
#### The component
```javascript
import { SpriteAnimator } from 'react-sprite-animator'
...
```
#### The hook
```javascript
import { useSprite } from 'react-sprite-animator'
const MyComponent = () => {
const styles = useSprite({
sprite: '/path-to/sprite.svg',
width: 100,
height: 100,
})
return
}
```
### Props
This is the same for the hooks options and the props of the component.
- width **{number}** - width of clipped sprite (original, non-scaled dimensions)
- height **{number}** - height of clipped sprite (original, non-scaled dimensions)
- scale **{number}** - scale of the original sprite (default: 1, retina / @2x: 2)
- sprite **{string}** - path to sprite
- direction **{string}** - horizontal/vertical
- shouldAnimate **{bool}** - if the sprite should animate
- startFrame **{number}** - the frame to start animation
- fps **{number}** - the frame rate (frames per second) target
- stopLastFrame **{bool}** - stops animation from looping
- frame **{number}** - manually sets current frame
- onEnd **{function}** - callback when the animation finishes (only triggered when stopLastFrame is true)
**Only required for two-dimensional sprites**
- frameCount **{number}** - the total frame count of the sprite
- wrapAfter **{number}** - the row or column count of the sprite (direction: "horizontal" -> columns, "vertical" -> rows)