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 (


{items.map((item: any) => (

• 
  {...getItemProps(item.id)}
  style={{ background: item.color }}
  >
  {item.text}
  
  

))}


)
}
`

Props

$3

> Array of objects with each item containing a unique id

$3

> number, defaults to 250

$3

> number, defaults to 200

$3

> string, defaults to a subtle springy cubic-bezier(.39,.28,.13,1.14)

Example

`
git clone git@github.com:timc1/react-drag-elements.git
`

`
cd react-drag-elements/example
`

`
yarn
`

`
yarn start
``