react-list-shuffle

Lightweight, easy to use component for animated shuffling and change order in lists

React list shuffle.webm

Demo

Live Demo

Installation

# with npm
npm install react-list-shuffle

# with yarn
yarn add react-list-shuffle

Basic 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. |