Use Reorder

> Simple hooks-based list reorder running on react-beautiful-dnd

Your usual reorderer | Arbitrary number of lists
:-------------------------:|:-------------------------:
!Reorderer in action | !Multi-reorderer in action

Optional hint animations | For both single and multiple lists
:-------------------------:|:-------------------------:
!Reorder animation | !Multi-reorder animation

Usage

$3

``jsx
import { useReorder, Item } from 'use-reorder'

function MyComponent() {
const items: Item[] = [
{ id: 'id1', elem:

`

$3

As opposed to the single list, now you're in control of . Make sure it wraps all lists and that you pass it the returned onDragEnd. As long as that holds, you can place the lists wherever you please.

`jsx
import { DragDropContext } from 'react-beautiful-dnd'
import { useMultiReorder } from 'use-reorder'

const items = [
{ id: 'item1', item: (...) =>

Optionally, you can install framer-animations to add this animations (useful as a simple guide for users)

Single list | Multiple lists
:-------------------------:|:-------------------------:
!Reorder animation | !Multi-reorder animation

`bash
npm i framer-animations
`

`bash
yarn add framer-animations
`

$3

Exactly the same as useReorder but returns a run function to trigger the animation
`jsx
import { useAnimatedReorder } from 'use-reorder/dist/animated'

const { reorderer, run } = useAnimatedReorder(items)
`

$3

`jsx
import { useMultiReorder, MultiItem } from 'use-reorder'
import { useMultiAnimation } from 'use-reorder/dist/animated'

const { animation, run, sensor } = useMultiAnimation('animated-item')

const items = [
{ id: 'some-item', elem: () =>

return (

...
``