react-smooth-list

🍿 React component for animating child nodes

See an example here.

Installation

This package is distributed via npm.

npm install react-smooth-list

Basic Usage

Here's the basic concept of how it rocks:

import SmoothList from 'react-smooth-list';
// ...
<SmoothList>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</SmoothList>

Options

Animates its children, one by one.

⚠️ To have children animate separately, they must be first-level children of the <SmoothList> component (i.e. members of its props.children).

Props

Key	Type	Default	Description
delay	number	50	Delay between each child's animation in milliseconds.
transitionDuration	number	400	Duration of each child's animation in milliseconds.
className	string		Adds a className prop to the container div.
childClassName	string		Adds a className prop to each child div, allowing you to style the direct children of the SmoothList component.
wrapperTag	string	"div"	Override the HTML element of the wrapping div.
childTag	string	"div"	Override the HTML element wrapped around each child element.
visible	boolean		If not undefined, the visible prop can be used to control when the fade in occurs. If set to false after the fade-in animation completes, the children will fade out one by one.
onComplete	function		Specifies a callback to be called when the animation completes.
animated	boolean	true