Skip to content
A small & efficient React Hook that allows users to drag items around and update lists of elements.
Branch: master
Clone or download
Latest commit ec5886f Mar 2, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Update example version Mar 1, 2019
lib Initial Mar 1, 2019
src
.gitignore Initial Mar 1, 2019
LICENSE Create LICENSE Mar 2, 2019
README.md
demo.gif
index.d.ts
package.json
tsconfig.json

README.md

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.

demo

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 git@github.com:timc1/react-drag-elements.git
cd react-drag-elements/example
yarn
yarn start
You can’t perform that action at this time.