# react-animated-css

> React component to show or hide elements with animations using [Animated.css](https://daneden.github.io/animate.css/)

Latest version **1.2.1** (published 2019-05-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-animated-css
pnpm add react-animated-css
yarn add react-animated-css
bun add react-animated-css
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2019-05-17 |
| First published | 2017-07-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 145.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 233 |
| Author | Fareed Alnamrouti |
| Maintainers | digital.flowers |
| Keywords | react, animated, animation, animated.css |

## Links

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

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^15.6.1
- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [babel-polyfill](https://npm.io/package/babel-polyfill.md) ^6.23.0
- [browser-or-node](https://npm.io/package/browser-or-node.md) ^1.0.2

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.2.1 (latest) — 2019-05-17
- 1.2.0 — 2019-05-12
- 1.0.5 — 2019-04-09
- 1.0.4 — 2018-02-20
- 1.0.3 — 2018-02-20
- 1.0.2 — 2017-09-28
- 1.0.1 — 2017-07-31
- 1.0.0 — 2017-07-25

## README

# react-animated-css
React component to show or hide elements with animations using [Animated.css](https://daneden.github.io/animate.css/)

[![npm version](https://img.shields.io/npm/v/react-animated-css.svg?style=flat-square)](https://www.npmjs.com/package/react-animated-css)
[![npm downloads](https://img.shields.io/npm/dt/react-animated-css.svg?style=flat-square)](https://www.npmjs.com/package/react-animated-css)

## demo
https://digital-flowers.github.io/react-animated-css.html

## install

```bash
npm i react-animated-css --save
```
**Note** You have to include [Animated.css](https://daneden.github.io/animate.css/) in your html page, this component is just a wrapper for it.

```html
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
```

## how to use
very easy to use, just wrap your content with the animated component
```javascript
import {Animated} from "react-animated-css";

<Animated animationIn="bounceInLeft" animationOut="fadeOut" isVisible={true}>
    <div>
        hello world ;)
    </div>
</Animated>

```

then you can just toggle the  `isVisible` property to see the animation.

### Properties

- **animationIn** animation in name, default "fadeIn"
- **animationOut** animation out name, default "fadeOut"
- **animationInDelay** animation in delay, default 0
- **animationOutDelay** animation out delay, default 0
- **animationInDuration** animation in delay, default 1000
- **animationOutDuration** animation out delay, default 1000
- **style** react style property for the inner component
- **isVisible** if the component is visible or not, default true
- **innerRef** react ref property for the inner component
- **className** react className property for the inner component
- **animateOnMount** apply animationIn on mount or not, default true


### List of animation
All the following animation from animated.css are supported.

| Animation Name |
|--------------------|
| `bounce` |
| `flash` |
| `pulse` |
| `rubberBand` |
| `shake` |
| `headShake` |
| `swing` |
| `tada` |
| `wobble` |
| `jello` |
| `bounceIn` |
| `bounceInDown` |
| `bounceInLeft` |
| `bounceInRight` |
| `bounceInUp` |
| `bounceOut` |
| `bounceOutDown` |
| `bounceOutLeft` |
| `bounceOutRight` |
| `bounceOutUp` |
| `fadeIn` |
| `fadeInDown` |
| `fadeInDownBig` |
| `fadeInLeft` |
| `fadeInLeftBig` |
| `fadeInRight` |
| `fadeInRightBig` |
| `fadeInUp` |
| `fadeInUpBig` |
| `fadeOut` |
| `fadeOutDown` |
| `fadeOutDownBig` |
| `fadeOutLeft` |
| `fadeOutLeftBig` |
| `fadeOutRight` |
| `fadeOutRightBig` |
| `fadeOutUp` |
| `fadeOutUpBig` |
| `flipInX` |
| `flipInY` |
| `flipOutX` |
| `flipOutY` |
| `lightSpeedIn` |
| `lightSpeedOut` |
| `rotateIn` |
| `rotateInDownLeft` |
| `rotateInDownRight` |
| `rotateInUpLeft` |
| `rotateInUpRight` |
| `rotateOut` |
| `rotateOutDownLeft` |
| `rotateOutDownRight` |
| `rotateOutUpLeft` |
| `rotateOutUpRight` |
| `hinge` |
| `jackInTheBox` |
| `rollIn` |
| `rollOut` |
| `zoomIn` |
| `zoomInDown` |
| `zoomInLeft` |
| `zoomInRight` |
| `zoomInUp` |
| `zoomOut` |
| `zoomOutDown` |
| `zoomOutLeft` |
| `zoomOutRight` |
| `zoomOutUp` |
| `slideInDown` |
| `slideInLeft` |
| `slideInRight` |
| `slideInUp` |
| `slideOutDown` |
| `slideOutLeft` |
| `slideOutRight` |
| `slideOutUp` |

## note:
From React 17.x.x [componentWillReceiveProps](https://medium.com/@baphemot/whats-new-in-react-16-3-d2c9b7b6193b#dd16) will be deprecated and a different strategy is introduced.

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