This is a component that animates through an image sprite.

• Animated Heart Example

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.

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)