react-animate-mount

1.0.1 • Public • Published

React Animate Mount

npm version license

Simple and light wrapper component for sliding (to auto height) and fading animation when children mounts and unmount:

  • Animate - provides animation for single component when mount & umount
  • AnimateGroup - provides animation for items entering & leaving a list.

Install

$ yarn add react-animate-mount

Demos

Animate

Help animate single component when mount & umount

Usage

/** Before **/
this.state.show ? {childen} : null;

/** After **/
import { Animate } from 'react-animate-mount'

<Animate show={this.state.show}>
  {childen}
</Animate>

Props

Name Type Description
show boolean The key boolean that indicate if the children should be mounted
appear ?boolean = false Normally component is not animated when <Animate> mounts, with this flag the child component will animate in on initialization.
duration ?number = 200 The duration you want the animate to last in ms, default to 250
type ?string('slide' or 'fade') = 'slide' Specify animation effect, sliding or pure fading
onAnimateComplete ?function Invokes when component animation finishes.

AnimateGroup

Wraps around a list of item, this provides <Animate> effect to each individual child. As item changes in the list, <AnimateGroup> will animate out removed children and animate in new children correctly.

Please provide unique key to each child. keys are used to identify child between renders

Usage

import { AnimateGroup } from 'react-animate-mount'

<AnimateGroup>
  {items.map(item => (<Item key={item.key} data={item.data} />)}
</AnimateGroup>

Props

Name Type Description
duration ?number = 200 The duration you want the animate to last in ms, default to 250
type ?string('slide' or 'fade') = 'slide' Specify animation effect, sliding or pure fading
onAnimateComplete ?function Invokes when each time animation finishes.

Readme

Keywords

none

Package Sidebar

Install

npm i react-animate-mount

Weekly Downloads

160

Version

1.0.1

License

MIT

Unpacked Size

502 kB

Total Files

32

Last publish

Collaborators

  • mingruizhang