# react-drag-elements

> Snappy & efficient React Hook to update the order of lists by dragging items around.

Latest version **0.1.2** (published 2019-08-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-drag-elements
pnpm add react-drag-elements
yarn add react-drag-elements
bun add react-drag-elements
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2019-08-25 |
| First published | 2019-03-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 30 |
| Author | Tim Chang |
| Maintainers | timcchang |

## Links

- npm: https://www.npmjs.com/package/react-drag-elements
- Repository: https://github.com/timc1/react-drag-elements
- Homepage: https://github.com/timc1/react-drag-elements#readme
- Issues: https://github.com/timc1/react-drag-elements/issues
- npm.io page: https://npm.io/package/react-drag-elements

## Recent versions

- 0.1.2 (latest) — 2019-08-25
- 0.1.1 — 2019-03-02
- 0.1.0 — 2019-03-01
- 0.0.7 — 2019-03-01
- 0.0.6 — 2019-03-01
- 0.0.5 — 2019-03-01
- 0.0.4 — 2019-03-01
- 0.0.3 — 2019-03-01
- 0.0.2 — 2019-03-01
- 0.0.1 — 2019-03-01

## README

<h1 align="center">
  react-drag-elements
  <br>
  <br>
  📱🕹
</h1>
<p align="center" style="font-size: 1.5rem;">
  A light weight and efficient Hook that make DOM elements draggable & reorganizable.
</p>

## About

This project is inspired by the MacOS Launchpad iOS Springboard UI, where items can be dragged
around and reordered.

<p align="center">
<img src="demo.gif" alt="demo" />
</p>

## 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
```

---
_Source: https://npm.io/package/react-drag-elements · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._