A React component implementing the latest version of Animate.css
npm install @charlesvien/react-animatecss[![npm package][npm-img]][npm-url]
[![Downloads][downloads-img]][downloads-url]
[![Build Status][build-img]][build-url]
> A React component implementing the latest version of Animate.css!
- Zero dependencies - All self contained code
- Minimal package size - <7 kB gzipped
- No messy installation - A simple way to add motion to your react components
``bashwith npm
npm install @charlesvien/react-animatecss
Documentation
The official Animate.css documentation can be found at https://animate.style. You can view a list of all animations that your able to use with this component on their website.
Usage
This is a basic example showing how to add a fadeIn and fadeOut animation to a component.
NOTE: In order for the fadeOut animation to occur, instead of conditionally rendering the component you must pass
false to the visible prop when the component should no longer be visible.`js
import Animate from '@charlesvien/react-animatecss'; animationIn="fadeIn"
animationOut="fadeOut"
inDuration={1000}
outDuration={1000}
visible
>
Magnolia
`API
| Prop | Type | Default | Description |
|--------------|----------|-------------|----------------------------------------------------------------------|
| animationIn | string | fadeIn | The animation name to be played when the component turns visible |
| animationOut | string | fadeOut | The animation name to be played when the component turns invisible |
| inDelay | number | 0 | The delay before the visible animation is played |
| outDelay | number | 0 | The delay before the invisible animation is played |
| inDuration | number | 1000 | The duration the visible animation is played |
| outDuration | number | 1000 | The duration the invisible animation is played |
| repeat | number | 0 | How many times the animation repeats (min: 1, max: 3) |
| onMount | boolean | true | If the animation should play when the component is first mounted |
| visible | boolean | true | If the Animate component should be visible |
| loop | boolean | false | If the animation should infinitely loop |
| className | string | _undefined_ | Additional optional css class names to apply to the container |
| style | object | _undefined_ | Additional optional css properties to apply to the container |
Development
Contributions are welcome to react-animatecss!
To set up the project:
1. Fork and clone the repository
2.
$ yarn
3. $ yarn dev`Storybook will then be served on http://localhost:6006/ in watch mode, meaning you don't have refresh the page to see your changes.
[npm-img]:https://img.shields.io/npm/v/@charlesvien/react-animatecss
[npm-url]:https://www.npmjs.com/package/@charlesvien/react-animatecss
[build-img]:https://github.com/charlesvien/react-animatecss/actions/workflows/release.yml/badge.svg
[build-url]:https://github.com/charlesvien/react-animatecss/actions/workflows/release.yml
[downloads-img]:https://img.shields.io/npm/dt/@charlesvien/react-animatecss
[downloads-url]:https://www.npmtrends.com/@charlesvien/react-animatecss