/react-swap-animation

Swap animation for React.

Primary LanguageJavaScript

React Swap Animation

Swap animation for React. Useful to smoothly swap blocks of content with varying heights.

Note: Due to the nature of the effect SwapAnimation only animates a single child. If you want to animate items in a list use react-slide-animation instead.

Installation

npm install --save react-swap-animation

Usage

import SwapAnimation from 'react-swap-animation';

const Message = ({ message }) => (
    <SwapAnimation animationEnterTimeout={300} animationLeaveTimeout={300}>
        {!message ? <Spinner key="spinner" /> : <Text key="message">{message}</Text>}
    </SwapAnimation>
);

export default Message;

Build

Import styles using PostCSS Import Plugin (e.g. in your main.css):

@import "react-swap-animation";

Or manually add react-swap-animation/lib/index.css to your webpack entry config.

Reference

  • children - Required. Single child that animates when swapped.

    You must provide the key attribute for all children of SwapAnimation. This is how React determines which child has entered, left, or stayed.

  • animationEnterTimeout - Required. Duration of transition for child entering.

  • animationLeaveTimeout - Required. Duration of transition for child leaving.

  • component - Component used for rendering. (default: 'div')

    Can be a string (DOM component) or any user defined component:

    <SwapAnimation component={CustomContainer}>
    {/* ... */}
</SwapAnimation>

    Additional properties to SwapAnimation will become properties of the rendered component:

    <SwapAnimation className="example" style={{ border: '1px solid black' }}>
    {/* ... */}
</SwapAnimation>

  • animationName - Prefix used to construct CSS class names. (default: 'swap-animation')

    Can be used to create custom animation effects:

    • {animationName} - Applied to container when child is swapped
    • {animationName}-active - Applied to container on next tick
    • {animationName}-enter - Applied to entering child during swap
    • {animationName}-enter-active - Applied to entering child on next tick
    • {animationName}-leave - Applied to leaving child during swap
    • {animationName}-leave-active - Applied to leaving child on next tick