1.0.4 • Published 2 years ago
react-list-shuffle v1.0.4
react-list-shuffle
Lightweight, easy to use component for animated shuffling and change order in lists
Demo
Installation
# with npm
npm install react-list-shuffle# with yarn
yarn add react-list-shuffleBasic usage
import ListShuffle from 'react-list-shuffle';
const anyListItemsArray = [0, 1, 2, 3, 4, 5]; <ListShuffle shuffle={ shuffleKey } duration={ 2 } restoreOrder={ restoreOrderKey }>
{ anyListItemsArray.map((item: number) => <div key={ item }>
ITEM { item }
</div>)}
</ListShuffle>Props
| NAME | TYPE | DEFAULT | DESCRIPTION |
|---|---|---|---|
| id | String | listWrapper | Component id |
| duration | Number | 1 | Animation duration (sec) |
| shuffle | String, Number, Boolean | Date.now() | Change this prop for calling shuffling |
| shuffleOnInit | Boolean | false | If true, shuffles list on first init |
| restoreOrder | String, Number, Boolean | Date.now() | Change this prop for restoring initial list order |
| shuffledHandler | (args: number[]) => any | undefined | Optionally callback firing after shuffling animation. Receives array with list items indexes on new positions. |