https://github.com/catamphetamine/react-sortable-dnd-list
A sortable Drag&Drop list React component
https://github.com/catamphetamine/react-sortable-dnd-list
Last synced: about 1 month ago
JSON representation
A sortable Drag&Drop list React component
- Host: GitHub
- URL: https://github.com/catamphetamine/react-sortable-dnd-list
- Owner: catamphetamine
- License: mit
- Created: 2019-09-24T17:01:48.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-06-06T22:09:43.000Z (about 1 year ago)
- Last Synced: 2025-04-06T04:26:14.577Z (2 months ago)
- Language: JavaScript
- Homepage: https://catamphetamine.github.io/react-sortable-dnd-list/
- Size: 109 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# SortableList
A sortable drag'n'drop list React component.
[DEMO](https://catamphetamine.github.io/react-sortable-dnd-list)
[DEMO](https://codepen.io/catamphetamine/pen/qBWxEQX) (same but on [codepen.io](https://codepen.io))
## Install
```
npm install react-sortable-dnd-list --save
```
## Use
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 new `value` 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, if `dragHandleDataAttribute` is `"draggable"` then somewhere inside list item DOM Element there must be a DOM Element with a `data-draggable` attribute, and only that DOM Element will be draggable.
* `animationDuration: number?` — Is `200` by default.
* `animationEasing: string?` — Is `ease-out` by default.
`itemComponent` receives properties:
* `dragging: boolean` — Is `true` when some item is being dragged.
* `dragged: boolean` — Is `true` when this item is being dragged.
* `style: object` — The `style` property that must be set on the item root element.
* `children` — The list item.
## Example
```js
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 (
{title}
{description}
)
}
function Demo({
initialItems
}) {
const [items, setItems] = useState(initialItems)
return (
)
}
ReactDOM.render(
,
document.getElementById('app')
)
```
## License
[MIT](LICENSE)