Skip to content

🎨 A React component implementing the latest version of Animate.css

License

Notifications You must be signed in to change notification settings

charlesvien/react-animatecss

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-animatecss

npm package Downloads Build Status

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.