react-drag-elements
📱 🕹
A light weight and efficient Hook that make DOM elements draggable & reorganizable.
About
This project is inspired by the MacOS Launchpad iOS Springboard UI, where items can be dragged around and reordered.
Setup
yarn add react-drag-elements
or
npm install react-drag-elements
Usage
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>
)
}
Props
initialItems
Array of objects with each item containing a unique id
delay
number, defaults to 250
debounceMs
number, defaults to 200
easeFunction
string, defaults to a subtle springy
cubic-bezier(.39,.28,.13,1.14)
Example
git clone [email protected]:timc1/react-drag-elements.git
cd react-drag-elements/example
yarn
yarn start