rsa

react-slide-animation

Slide animation for React.

Showing:

Popularity

Downloads/wk

53

GitHub Stars

1

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

2

Size (min+gzip)

5.2KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

React Slide Animation

Slide animation for React. Useful to animate items in a list.

Installation

npm install --save react-slide-animation

Usage

import SlideAnimation from 'react-slide-animation';

const List = ({ items }) => (
    <SlideAnimation component="ul">
        {items.map(({ id, name }) => <li key={id}>{name}</li>)}
    </SlideAnimation>
);

export default List;

Build

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

@import "react-slide-animation";

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

Reference

  • children - Required. Children that animate when added to or removed from SlideAnimation.

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

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

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

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

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

    <SlideAnimation className="example" style={{ border: '1px solid black' }}>
        {/* ... */}
    </SlideAnimation>
    
  • animationName - Prefix used to construct CSS class names. (default: 'slide-animation')

    Can be used to create custom animation effects:

    • {animationName}-enter - Applied to entering child
    • {animationName}-enter-active - Applied to entering child on next tick
    • {animationName}-leave - Applied to leaving child
    • {animationName}-leave-active - Applied to leaving child on next tick

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100