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: 3 days 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 (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2023-04-03T14:00:21.000Z (over 1 year ago)
• Last Synced: 2024-11-09T18:12:09.612Z (11 days ago)
• Topics: animates, sprites
• Language: JavaScript
• Size: 1.84 MB
• Stars: 84
• Watchers: 3
• Forks: 23
• Open Issues: 27
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Sprite Animator

![Dependabot](https://api.dependabot.com/badges/status?host=github&repo=jcblw/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)