react-animatecss
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
Installation
# with npm
npm install @charlesvien/react-animatecss
# with yarn
yarn add @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.
import Animate from '@charlesvien/react-animatecss';
<Animate
animationIn="fadeIn"
animationOut="fadeOut"
inDuration={1000}
outDuration={1000}
visible
>
Magnolia
</Animate>
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 |
| style | object | undefined | Additional optional css properties to apply to the Animate container |
Development
Contributions are welcome to react-animatecss!
To set up the project:
- Fork and clone the repository
$ yarn$ 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.
