# animate.css-react

> React animations with animate.css

Latest version **1.1.0** (published 2020-10-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install animate.css-react
pnpm add animate.css-react
yarn add animate.css-react
bun add animate.css-react
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-10-03 |
| First published | 2019-05-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 68.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | kurdin |
| Keywords | react, animate.css |

## Links

- npm: https://www.npmjs.com/package/animate.css-react
- Repository: https://github.com/kurdin/animate.css-react
- Homepage: https://github.com/kurdin/animate.css-react#readme
- Issues: https://github.com/kurdin/animate.css-react/issues
- npm.io page: https://npm.io/package/animate.css-react

## Dependencies (7)

- [react](https://npm.io/package/react.md) ^16.8.6
- [proptypes](https://npm.io/package/proptypes.md) ^0.14.4
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6
- [dom-helpers](https://npm.io/package/dom-helpers.md) ^3.4.0
- [object-assign](https://npm.io/package/object-assign.md) ^4.1.1
- [create-react-class](https://npm.io/package/create-react-class.md) ^15.6.3
- [react-transition-group](https://npm.io/package/react-transition-group.md) ^1.2.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2020-10-03
- 1.0.0 — 2020-01-13
- 0.1.0 — 2019-05-19
- 0.0.3 — 2019-05-19

## README

# React animations with animate.css

<img src="https://cloud.githubusercontent.com/assets/6027060/25237321/4f1a39fa-25b8-11e7-8269-1743f8b8552e.gif"/>

## Installation

Using [npm](https://www.npmjs.com/):

    $ npm install --save animate.css-react
    $ npm install --save animate.css

## Run Demo

    $ git clone https://github.com/kurdin/animate.css-react
    $ cd animate.css-react
    $ npm install
    $ npm run demo

Open browser in http://localhost:8080

## Notes

You need to install and require animate.css yourself.

## Usage

```js
import Animate from 'animate.css-react'

import 'animate.css/animate.css'  // you need to require the css somewhere

// animate list, dont forget to add unique key to each item, don't use array index!!!
<Animate
    enter="bounceIn" // on Enter animation
    leave="bounceOut" // on Leave animation
    appear="fadeInRight" // on element Appear animation (onMount)
    change="flipInX" // on element Change animation (onUpdate)
    durationAppear={1000}
    durationEnter={1000}
    durationLeave={1000}
    durationChange={1000}
    animate={true|false|expression} // turn off/on animation, true by default
    animateChangeIf={true|false|expression} // turn off/on Change only animation, true by default
    component="ul">

    {this.state.items.map(item => <li key={item.id}>{item.name}</li>)}

</Animate>
// or animate single element / component

<Animate
    appear="fadeInDown"
    durationAppear={1000}
    component="div" >

  <h1>react animate.css</h1>

</Animate>
```

based on https://github.com/thiagoc7/react-animate.css

---
_Source: https://npm.io/package/animate.css-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._