Add Sortable Lists to our React App with React Sortable HOC

The React Sortable HOC library lets us add sortable lists to our React app.

In this article, we’ll look at how to use it to add the lists.

Installation

We install the library by running:

npm install react-sortable-hoc --save

Sortable List

We can use the library to create a sortable list by writing:

import React from "react";
import { SortableContainer, SortableElement } from "react-sortable-hoc";
import arrayMove from "array-move";

const SortableItem = SortableElement(({ value }) => <li>{value}</li>);

const SortableList = SortableContainer(({ items }) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${value}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortableComponent extends React.Component {
  state = {
    items: Array(6)
      .fill()
      .map((_, i) => `item ${i}`)
  };
  onSortEnd = ({ oldIndex, newIndex }) => {
    this.setState(({ items }) => ({
      items: arrayMove(items, oldIndex, newIndex)
    }));
  };
  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;
  }
}
export default function App() {
  return (
    <div className="App">
      <SortableComponent />
    </div>
  );
}

We use the SortableElement function to return an element that can be sortable.

Then we created the SortableList component with the SortableContainer that can sort the SortableElement components.

In the SortableComponent component, we add the onSortEnd method to let us swap the positions of the items as we drag and drop them in different positions.

The SortableList component takes the items prop for the items and onSortEnd takes a function to change the indexes.

oldIndex and newIndex are the old and new index respectively.

We use the array-move package to let us swap the positions of the array easily.

Props

The SortableList takes many other props.

axis sets the axis to sort by.

localAxis lets us lock the movement of an axis while sorting.

helperClass lets us set a class to style the list and items.

transtionDuration sets the transition duration when element shift positions.

keyCodes has an object with an array of keycodes for keyword accessible actions.

pressDelay lets us set the delay after clicking the item before we can sort the item.

onSortStart , onSortMove , and onSortOver are functions that are run when sorting starts, when we move the item, and when sorting is done respectively.

useDragHandle lets us set whether we want to show the drag handle.

getHelperDimensions lets us set the computed dimensions of the SortHelper .

Conclusion

The React Sortable HOC lets us create sortable lists easily within a React app.