react-slipmove
v1.0.11
Published
Animated sortable lists for react
Downloads
15
Maintainers
Readme
react-slipmove
Smoothly animated sortable lists for touch devices.
Installation
npm i react-slipmove
or
yarn add react-slipmove
Demo
import React, { Component, PureComponent } from 'react';
import SlipMove from 'react-slipmove';
import './App.css';
import { move, shuffle, reverse } from './array';
const generateItems = length => [...Array(length).keys()].map(k => `Item ${k}`)
const actions = {
reverse: ({items}) => ({items: reverse(items)}),
shuffle: ({items}) => ({items: shuffle(items)}),
move: (oldIndex, newIndex) => ({items}) => ({items: move(items, oldIndex, newIndex)}),
}
export default class extends Component {
state = { items: generateItems(20) }
move = ({oldIndex, newIndex}) => this.setState(actions.move(oldIndex, newIndex));
reverse = () => this.setState(actions.reverse);
shuffle = () => this.setState(actions.shuffle);
render() {
const { items } = this.state;
return (
<div className="App" >
<button onClick={this.reverse}>Reverse</button>
<button onClick={this.shuffle}>Shuffle</button>
<SlipMove onMoveEnd={this.move} flipMoveProps={{appearAnimation: 'fade'}} >
{items.map(item => <ListItem key={item}>{item}</ListItem>)}
</SlipMove>
</div>
);
}
}
// Requires class components as children
class ListItem extends PureComponent {
render() {
const { children } = this.props;
return <div className="list-item" >{children}</div>
}
}