React Sprite Animator

This is a component that animates through an image sprite.

• Animated Heart Example

Install

$ npm i react-sprite-animator -S

Usage

<SpriteAnimator
  sprite='/path-to/sprite.svg'
  width={100}
  height={100}
/>

Props

• 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

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)