@charlesvien/react-animatecss

!npm packagenpm-imgnpm-url !Downloadsdownloads-imgdownloads-url !Build Statusbuild-imgbuild-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

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.