Nimble Prime Musketeers

    react-drag-elements

    0.1.2 • Public • Published

    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
    

    Keywords

    none

    Install

    npm i react-drag-elements

    DownloadsWeekly Downloads

    21

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    1.27 MB

    Total Files

    24

    Last publish

    Collaborators

    • timcchang