A sortable drag'n'drop list React component.
DEMO (same but on codepen.io)
npm install react-sortable-dnd-list --save
The exported SortableList
component accepts properties:
-
value
— A list of items. Yes, the property name may seem weird but there's a reason for it:value
/onChange
convention is useful for using a sortable list as a form field. -
onChange: function
— Is called with the newvalue
after the user has interacted with the list. -
component
— List component. Is"div"
by default. -
itemComponent
— List item component (see below). -
itemComponentProps
— If defined, these properties will be passed to each list item element. -
dragHandleDataAttribute: string?
— If defined then only the handle of a list item will be draggable, not the entire list item. For example, ifdragHandleDataAttribute
is"draggable"
then somewhere inside list item DOM Element there must be a DOM Element with adata-draggable
attribute, and only that DOM Element will be draggable. -
animationDuration: number?
— Is200
by default. -
animationEasing: string?
— Isease-out
by default.
itemComponent
receives properties:
-
dragging: boolean
— Istrue
when some item is being dragged. -
dragged: boolean
— Istrue
when this item is being dragged. -
style: object
— Thestyle
property that must be set on the item root element. -
children
— The list item.
import React from 'react'
import SortableList from 'react-sortable-dnd-list'
const items = []
let i = 0
while (i < 10) {
items.push({
title: `List Item ${i + 1}`,
description: 'Aenean aliquam molestie urna, vel aliquam.'
})
i++
}
function ItemComponent({
dragging,
dragged,
children: { title, description },
...rest
}) {
return (
<div {...rest} className={`list__item ${dragged ? 'is-dragging' : ''}`}>
<div className="list__item-content">
<div className="list__item-title">
{title}
</div>
<div className="list__item-description">
{description}
</div>
</div>
</div>
)
}
function Demo({
initialItems
}) {
const [items, setItems] = useState(initialItems)
return (
<SortableList
className="list"
itemComponent={ItemComponent}
value={items}
onChange={setItems}/>
)
}
ReactDOM.render(
<Demo initialItems={items}/>,
document.getElementById('app')
)