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

Demo

Take a look at the demo

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
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.