Skip to content

thomheymann/react-slide-animation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Slide animation for React.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published