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.

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 |