A small & efficient React Hook that allows users to drag items around and update lists of elements.
MIT License
This project is inspired by the MacOS Launchpad iOS Springboard UI, where items can be dragged around and reordered.
yarn add react-drag-elements
or
npm install react-drag-elements
import useDragElements from 'react-drag-elements'
const initialItems = [
{ id: 0, text: 'One', color: '#616AFF' },
{ id: 1, text: 'Two', color: '#2DBAE7' },
{ id: 2, text: 'Three', color: '#fd4e4e' },
]
export default function App() {
const { items, getItemProps } = useDragElements({
initialItems,
delay: 200, // optional
debounceMs: 200, // optional
easeFunction: `ease-out` // optional
})
return (
<ul>
{items.map((item: any) => (
<li key={item.id}>
<button
{...getItemProps(item.id)}
style={{ background: item.color }}
>
<span>{item.text}</span>
</button>
</li>
))}
</ul>
)
}
Array of objects with each item containing a unique id
number, defaults to 250
number, defaults to 200
string, defaults to a subtle springy
cubic-bezier(.39,.28,.13,1.14)
git clone [email protected]:timc1/react-drag-elements.git
cd react-drag-elements/example
yarn
yarn start