easy-react-dnd

The easiest drag and drop grid library for React


Keywords
dnd, react, drag and drop, react drag and drop, react dnd
License
MIT
Install
npm install easy-react-dnd@1.1.9

Documentation



Easy drag and drop grid library for React

Installation

$ npm i easy-react-dnd

Demo

https://master.d34ix3fbmn7czh.amplifyapp.com/

Usage

The only required prop is the onItemSwitch prop. It is your responsability to update the state that renders the EasyItem components.



import React, { Component } from 'react'
import { EasyDraggable, EasyItem } from 'react-easy-dnd'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      itemArray: ['Test 1', 'Test 2', 'Test 3']
    }
  }

  _handleDragStart = (key) => {
    // Getting the key of the item being draged
  }
  _handleDragStop = (index) => {
    // Getting index of final position
  }

  /*
   * This function is required to keep persistance
   */
  _handleItemSwitch = (newArray) => {
    // Getting the new array of items
    // Get key with newArray[index].key
    let temp = []
    for (const item of newArray) {
      temp.push(item.key)
    }
    this.setState({ itemArray: temp })
  }

  _handleItemHover = (key, index) => {
    // key and index of hovered item
  }

  render() {
    return (
      <EasyDraggable
        cursor='grab'
        hSpacing='10px'
        vSpacing='10px'
        onDragStart={this._handleDragStart}
        onDragStop={this._handleDragStop}
        onItemSwitch={this._handleItemSwitch} //Required
        onItemHover={this._handleSwitch}
        itemsPerRow={2}
      >
        {this.state.itemArray.map((item) => (
          <EasyItem key={item}>
            <div className='box'>{item}</div>
          </EasyItem>
        ))}
      </EasyDraggable>
    )
  }
}
export default App

EasyDraggable Props

Appearance props

prop Type Default value Description
itemsPerRow number 1 The amount of items per row (columns per rows)
handle HTML component none A handle that allow dragging from a specific point
hSpacing string 0px Horizontal spacing between items (ex:12px)
vSpacing string 0px Vertical spacing between rows (ex:12px)
cursor string auto The cursor used on drag (cursor style property, ex : grab,pointer, ...)



Events props

prop Type parameter(s) Description
onDragStart funtion The key of the item being draged When drag starts
onDragStop funtion The key of the final position When drag stops
onItemSwitch funtion The new array of items When an item switch. This is required to keep persistance
onItemHover funtion key (key of hovered item), index (index of hovered item) When an item is hovered


EasyItem Props

prop Type Default value Required Description
key number/string none no Unique id for the item


Credits

Adam Pinheiro

Authors

  • Adam Pinheiro

Ressources used

Icons made by Metropolicons from www.flaticon.com