https://github.com/arve0/react-animate-on-change

Animate your components on state change
https://github.com/arve0/react-animate-on-change

Last synced: 3 months ago
JSON representation

Animate your components on state change

• Host: GitHub
• URL: https://github.com/arve0/react-animate-on-change
• Owner: arve0
• Created: 2016-01-02T09:57:57.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-11-12T19:12:52.000Z (8 months ago)
• Last Synced: 2024-03-17T23:03:15.761Z (4 months ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-animate-on-change
• Size: 1.14 MB
• Stars: 83
• Watchers: 4
• Forks: 17
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Lists

• awesome-react-components - react-animate-on-change

README

        
# react-animate-on-change

[![Build Status](https://travis-ci.org/arve0/react-animate-on-change.svg?branch=master)](https://travis-ci.org/arve0/react-animate-on-change)

Animate your react components on props or state changes, in contrast to [entries added/removed from arrays](https://facebook.github.io/react/docs/animation.html).



## Install

```sh

npm install react-animate-on-change react

```

## Usage

```js

import AnimateOnChange from 'react-animate-on-change'

// CommonJS:

// const AnimateOnChange = require('react-animate-on-change').default

// functional component

const Score = (props) =>

  

      Score: {props.score}

  

```

The example above will (roughly) render to:

**On enter or changes in `props.diff` or `props.score`:**

```html



  Score: 100



```

**On animation end:**

```html



  Score: 100



```

Also, [see the example folder](example).

## Props

`baseClassName {string}` : Base class name that be added to the component.

`animationClassName {string}` : Animation class name. Added when `animate == true`. Removed when the event [`animationend`](http://www.w3.org/TR/css3-animations/#animationend) is triggered.

`animate {bool}` : Whether component should animate.

`customTag {string}` : HTML tag of the component.

`onAnimationEnd {() => void)}` : Callback which is called when animation ends.

## Develop

Setup:

```sh

npm install

cd test

npm install

cd ..

```

Add tests in [test/client-tests.js](client-tests.js), start tests with:

```

npm test

```

Build and view example:

```

npm run build-example

open example/index.html

```

## Known issues

- The browser must support CSS3 animations.