React Sprite Animator

This is a component that animates through an image sprite.

• Animated Heart Example

Install

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

import { SpriteAnimator } from 'react-sprite-animator'
...
<SpriteAnimator
  sprite="/path-to/sprite.svg"
  width={100}
  height={100}
/>

The hook

import { useSprite } from 'react-sprite-animator'

const MyComponent = () => {
  const styles = useSprite({
    sprite: '/path-to/sprite.svg',
    width: 100,
    height: 100,
  })

  return <div style={style} />
}

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)