Skip to content

Latest commit

 

History

History
41 lines (28 loc) · 2.4 KB

README.md

File metadata and controls

41 lines (28 loc) · 2.4 KB
Raw

React Animated List

Intro

React animated list is a simple way you can have any of your array-based elements be automatically animated. This applies to when they are both rendered, and removed.

Edit nifty-platform-dj1iz Example Gif

Getting Started

Installing

yarn add react-animated-list

Usage

react-animated-list exports a named component AnimatedList. Importing this will allow you to wrap a list of other components you want animated as follows:

import { AnimatedList } from 'react-animated-list';
import { MyOtherComponent } from './MyOtherComponent';

const MyComponent = ({myData}) => (
  <AnimatedList animation={"grow"}>
    {otherComponents.map((c) => (
      <MyOtherComponent key={c.id} />
    ))}
  </AnimatedList>
)

Note that the key property is required on the child components, this is used to determine which elements to animate in/out

The AnimatedListComponent can be configured with the following properties:

Name Type Default Description
animation grow, fade, slide, zoom, collapse grow The type of animation to use
animationProps none The props that should be passed to the Material UI component that handles the rendering. See https://material-ui.com/api/grow/#grow-api for more examples
initialAnimationDuration number 750 How long the enter animation for the list should take on the initial render