/react-list-drag-and-drop

Lightweight React component to reorder list elements by drag-and-drop

Primary LanguageTypeScriptMIT LicenseMIT

React List Drag and Drop

This package has not been tested on mobile browsers or React Native. SORRY!

Build Status


React List Drag and Drop Example

React List Drag and Drop Example

Installation

npm install --save react-list-drag-and-drop

Usage

You must have an Array of items to render in your list.
Instead of rendering it inside a <div> you render it inside a <RLDD> component using a render prop.

import RLDD from 'react-list-drag-and-drop/lib/RLDD';
<RLDD
  items={items}
  itemRenderer={(item) => {
    return (
      <div className="item">{item.title}</div>
    );
  }}
  onChange={this.handleRLDDChange}
/>

Then you need to handle the onChange callback and call setState with the new list. Like this:

  private handleRLDDChange(newItems) {
    this.setState({ items: newItems });
  }

Each item must be of type Object and have an id property of type number.

You can play around with the examples

Typescript

Edit Draggable List for React + Typescript

Javascript

Edit Draggable List for React + Typescript