react-smooth-list's Introduction

react-smooth-list

🍿 React component for animating an element's children, one by one.

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

Recommend Projects