https://github.com/timc1/react-drag-elements

A small & efficient React Hook that allows users to drag items around and update lists of elements.
https://github.com/timc1/react-drag-elements

animation css html javascript react typescript

Last synced: 16 days ago
JSON representation

A small & efficient React Hook that allows users to drag items around and update lists of elements.

• Host: GitHub
• URL: https://github.com/timc1/react-drag-elements
• Owner: timc1
• License: mit
• Created: 2019-03-01T22:59:14.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-08-25T06:51:50.000Z (about 5 years ago)
• Last Synced: 2024-10-14T18:49:08.674Z (29 days ago)
• Topics: animation, css, html, javascript, react, typescript
• Language: TypeScript
• Size: 579 KB
• Stars: 30
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  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) => (

        


          

            {item.text}

          

        

      ))}

    

  )

}

```


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

```