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.