ahutchings / react-sortable

A sortable list component built with React

React Sortable

A React higher-order component for creating sortable interfaces utilizing the HTML5 drag & drop API.

Mainly tested in latest stable Webkit, Firefox and IE releases.

Check out http://webcloud.se/react-sortable or the index.html file of this repository for an example implementation.

##Installation

To install a stable release use:

npm i react-sortable --save

If you want to install most current master branch, open your package.json and change the line for react-sortable like this:

"react-sortable": "https://github.com/danielstocks/react-sortable/tarball/master"

Example

Here's a sample implementation using the react-sortable higher order component.

import React from 'react';
import { Sortable } from 'react-sortable';

var ListItem = React.createClass({
  displayName: 'SortableListItem',
  render: function() {
    return (
      <div {...this.props} className="list-item">{this.props.children}</div>
    )
  }
})

var SortableListItem = Sortable(ListItem);

var SortableList = React.createClass({

  getInitialState: function() {
    return {
      draggingIndex: null,
      data: this.props.data
    };
  },

  updateState: function(obj) {
    this.setState(obj);
  },

  render: function() {
    var listItems = this.state.data.items.map(function(item, i) {
      return (
        <SortableListItem
          key={i}
          updateState={this.updateState}
          items={this.state.data.items}
          draggingIndex={this.state.draggingIndex}
          sortId={i}
          outline="list">{item}</SortableListItem>
      );
    }, this);

    return (
          <div className="list">{listItems}</div>
    )
  }
});

Here's some example data and a render call to the above component

import ReactDOM from 'react-dom';

var data = {
  items: [
    "Gold",
    "Crimson",
    "Hotpink",
    "Blueviolet",
    "Cornflowerblue"
  ]
};

ReactDOM.render(
    <SortableList data={data} />,
    document.body
);

You can this simple working demo in ./example folder.

How it works

The Sortable higher order component will automatically attach the necessary drag event handlers.

It will expects the following properties to be defined on your Item components:

• key (number index, common recommendation)
• updateState (function called when an item is moved)
• draggingIndex (number index of item being dragged)
• items (array of data being sorted)
• outline (string "list" or "grid")
• sortId (number index of item)

Differentces from react-dnd sortable

• fewer lines of code = easier to implement and modify
• can handle both horizontal and vertical dragging
• there is a plan for touch support
• code is well documented and covered with unit tests
• but, if you want to have multiple different types of Drag & Drop interactions (not only sortable), you should definately check out react-dnd

Development

Except from example-from-npm at all the examples are loading the library code from ./src folder. That means you can use them to see how does a changes in the source code affect the functionality of the component.