use-reorder v1.0.29
Use Reorder
Simple hooks-based list reorder running on
react-beautiful-dnd
Your usual reorderer | Arbitrary number of lists |
---|---|
Optional hint animations | For both single and multiple lists |
---|---|
Usage
Single list
import { useReorder, Item } from 'use-reorder'
function MyComponent() {
const items: Item[] = [
{ id: 'id1', elem: <div>...</div> },
// ...
{ id: 'idn', elem: <div>...</div> },
]
const { order, ordered, reorderer } = useReorder(items)
// ordered = order.map(i => items[i]); provided for convenience
return (
<div>
...
{reorderer}
</div>
)
}
Multiple lists
As opposed to the single list, now you're in control of <DragDropContext>
. 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.
import { DragDropContext } from 'react-beautiful-dnd'
import { useMultiReorder } from 'use-reorder'
const items = [
{ id: 'item1', item: (...) => <div>...</div> },
{ id: 'item2', item: (...) => <div>...</div> },
...
]
const listIds = [{id: 'list1'}, {id: 'list2'}, ...]
const { onDragEnd, lists, order } = useMultiReorder(items, listIds)
return (
<DragDropContext onDragEnd={onDragEnd}>
...
{lists.map(list => (
<div>{list}</div>
))}
</DragDropContext>
)
Hint animation
Optionally, you can install framer-animations
to add this animations (useful as a simple guide for users)
Single list | Multiple lists |
---|---|
npm i framer-animations
yarn add framer-animations
Single: useAnimatedReorder
Exactly the same as useReorder
but returns a run
function to trigger the animation
import { useAnimatedReorder } from 'use-reorder/dist/animated'
const { reorderer, run } = useAnimatedReorder(items)
Multi (useMultiAnimation
+ useMultiReorder
)
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: () => <div>...</div> },
{ id: 'animated-item', elem: () => <div style={{position: 'relative'}}>...{animation}</div> } // inject the animation to the animated item
]
const { onDragEnd, .., } = useMultiReorder(items, ...)
return (
<DragDropContext onDragEnd={onDragEnd} sensors={[sensor]}>
...
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago