This is a component that animates through an image sprite.
npm i react-sprite-animator -S
# or
yarn add react-sprite-animatorReact is used with this library but do not come bundled with this library. Please make sure you have those installed before using.
You are able to use this library as a component or as a hook.
import { SpriteAnimator } from 'react-sprite-animator'
...
<SpriteAnimator
sprite="/path-to/sprite.svg"
width={100}
height={100}
/>import { useSprite } from 'react-sprite-animator'
const MyComponent = () => {
const styles = useSprite({
sprite: '/path-to/sprite.svg',
width: 100,
height: 100,
})
return <div style={style} />
}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)
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent