Neat Paraskavedekatriaphobia's Meaning

    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.

    Keywords

    none

    Install

    npm i react-animate-mount

    DownloadsWeekly Downloads

    243

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    502 kB

    Total Files

    32

    Last publish

    Collaborators

    • mingruizhang