Drag & drop, touch enabled, reorderable / sortable list, React component

Downloads in past


220193.0.0-alpha.76 years ago9 years agoMinified + gzip package size for react-reorder in KB


React Reorder
Drag & drop, touch enabled, reorder / sortable list, React component
If you are using v2, please refer to this documentation.


React Reorder is a React component that allows the user to drag-and-drop items in a list (horizontal / vertical), or a grid. You can also allow dragging items from one list to another.
It fully supports touch devices and auto-scrolls when a component is being dragged (check out the demo).
It also allows the user to set a hold time (duration before drag begins) allowing additional events like clicking / tapping to be applied.


Using npm
Add --save or -S to update your package.json
npm install react-reorder

Using bower
Add --save or -S to update your bower.json
bower install react-reorder


If using a module loader (requirejs / browserfiy / commonjs): require react-reorder where it will be used in your project
var Reorder = require('react-reorder');
var reorder = Reorder.reorder;
var reorderImmutable = Reorder.reorderImmutable;
var reorderFromTo = Reorder.reorderFromTo;
var reorderFromToImmutable = Reorder.reorderFromToImmutable;

// Or ES6

import Reorder, {
} from 'react-reorder';


  reorderId="my-list" // Unique ID that is used internally to track this list (required)
  reorderGroup="reorder-group" // A group ID that allows items to be dragged between lists of the same group (optional)
  getRef={this.storeRef.bind(this)} // Function that is passed a reference to the root node when mounted (optional)
  component="ul" // Tag name or Component to be used for the wrapping element (optional), defaults to 'div'
  placeholderClassName="placeholder" // Class name to be applied to placeholder elements (optional), defaults to 'placeholder'
  draggedClassName="dragged" // Class name to be applied to dragged elements (optional), defaults to 'dragged'
  lock="horizontal" // Lock the dragging direction (optional): vertical, horizontal (do not use with groups)
  holdTime={500} // Default hold time before dragging begins (mouse & touch) (optional), defaults to 0
  touchHoldTime={500} // Hold time before dragging begins on touch devices (optional), defaults to holdTime
  mouseHoldTime={200} // Hold time before dragging begins with mouse (optional), defaults to holdTime
  onReorder={this.onReorder.bind(this)} // Callback when an item is dropped (you will need this to update your state)
  autoScroll={true} // Enable auto-scrolling when the pointer is close to the edge of the Reorder component (optional), defaults to true
  disabled={false} // Disable reordering (optional), defaults to false
  disableContextMenus={true} // Disable context menus when holding on touch devices (optional), defaults to true
    <div className="custom-placeholder" /> // Custom placeholder element (optional), defaults to clone of dragged element
  { => (
      <li key={}>
    Note this example is an ImmutableJS List so we must convert it to an array.
    I've left this up to you to covert to an array, as react-reorder updates a lot,
    and if I called this internally it could get rather slow,
    whereas you have greater control over your component updates.

Callback functions

The onReorder function that is called once a reorder has been performed.
You can use our helper functions for reordering your arrays.
import { reorder, reorderImmutable, reorderFromTo, reorderFromToImmutable } from 'react-reorder';

onReorder (event, previousIndex, nextIndex, fromId, toId) {
    myList: reorder(this.state.myList, previousIndex, nextIndex);

onReorderGroup (event, previousIndex, nextIndex, fromId, toId) {
  if (fromId === toId) {
    const list = reorderImmutable(this.state[fromId], previousIndex, nextIndex);

      [fromId]: list
  } else {
    const lists = reorderFromToImmutable({
      from: this.state[fromId],
      to: this.state[toId]
    }, previousIndex, nextIndex);

      [fromId]: lists.from,

Compatibility / Requirements

  • Version 3.x tested and working with React 15, but should be backward compatible at least a couple of versions.