https://github.com/charlesvien/react-animatecss
🎨 A React component implementing the latest version of Animate.css
https://github.com/charlesvien/react-animatecss
animate-css animatecss javascript react reactjs typescript
Last synced: about 2 months ago
JSON representation
🎨 A React component implementing the latest version of Animate.css
- Host: GitHub
- URL: https://github.com/charlesvien/react-animatecss
- Owner: charlesvien
- License: mit
- Created: 2021-07-25T19:41:39.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-09-27T00:50:12.000Z (over 4 years ago)
- Last Synced: 2026-03-31T13:42:48.041Z (about 2 months ago)
- Topics: animate-css, animatecss, javascript, react, reactjs, typescript
- Language: TypeScript
- Homepage: https://react-animatecss.com
- Size: 3.22 MB
- Stars: 14
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-animatecss
[![npm package][npm-img]][npm-url]
[![Downloads][downloads-img]][downloads-url]
[![Build Status][build-img]][build-url]
> A React component implementing the latest version of [Animate.css](https://animate.style)!
- **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](https://react-animatecss.com/)
## Installation
```bash
# 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.
```js
import Animate from '@charlesvien/react-animatecss';
Magnolia
```
## 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.
[npm-img]:https://img.shields.io/npm/v/@charlesvien/react-animatecss
[npm-url]:https://www.npmjs.com/package/@charlesvien/react-animatecss
[build-img]:https://github.com/charlesvien/react-animatecss/actions/workflows/release.yml/badge.svg
[build-url]:https://github.com/charlesvien/react-animatecss/actions/workflows/release.yml
[downloads-img]:https://img.shields.io/npm/dt/@charlesvien/react-animatecss
[downloads-url]:https://www.npmtrends.com/@charlesvien/react-animatecss