1.0.4 • Published 6 months ago
react-smooth-list v1.0.4
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 itsprops.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 |