Guide · Open source

How to use react-sortable-hoc: setup, example and limits

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

react-sortable-hoc is a set of React higher-order components that turn an existing list into a sortable one, with support for dragging on touch devices and sorting by keyboard. This guide shows how to install it, wire up a basic sortable list and check the prop options, and it explains why the maintainers now recommend a different library for new projects.

react-sortable-hocclauderic/react-sortable-hoc · ★ 10.9k · MIT Install options & downloads

Quick start

1Check your project. Confirm you have Node.js, npm and a React project with a bundler such as webpack. If you are starting a new project, consider @dnd-kit first, as the README advises.
2Install the package. Run npm install react-sortable-hoc --save in your project folder.
3Import the components. Import SortableContainer and SortableElement from react-sortable-hoc.
4Wrap your list item. Pass your item component to SortableElement and give each rendered item an index prop.
5Wrap your list. Pass your list component to SortableContainer and render the SortableElement items inside it.
6Handle the reorder. Pass an onSortEnd handler that uses arrayMove with oldIndex and newIndex to update your state.
7Style the result. Add your own CSS, since the library ships without default styles, and use helperClass to style the drag helper if needed.

Should you use react-sortable-hoc at all?

The README says this library is no longer actively maintained. It will continue to receive critical security updates, but no new features are planned. It also warns that the findDOMNode method is expected to be deprecated in future versions of React, and the library will stop working when that method is removed from react-dom.

The maintainers strongly encourage new consumers to adopt @dnd-kit instead. Use react-sortable-hoc mainly if you already depend on it and need security fixes or are maintaining legacy code.

Existing projects that already use react-sortable-hoc: keep it and apply security updates.
New projects: the README recommends @dnd-kit instead.
Other comparable projects named in the analysis: react-dnd and react-beautiful-dnd.

Install react-sortable-hoc with npm

You need Node.js and npm, plus a React project with a module bundler such as webpack. Install the package from your project folder with the command below.

The README also documents an UMD build, loaded with a script tag from dist/react-sortable-hoc.umd.js.

$ npm install react-sortable-hoc --save

Import SortableContainer and SortableElement

Bundlers that support CommonJS or ES2015 modules can import the two components directly. With Babel or another ES6 transpiler, use named imports. Without one, the README shows a require call and reads the components from the module object.

The basic example also imports arrayMove from the array-move package, which the sorting handler uses to reorder your state.

import {SortableContainer, SortableElement} from 'react-sortable-hoc';

Build a basic sortable list

Wrap each list item with SortableElement and wrap the list with SortableContainer. Give every item an index prop that matches its position. Store the items in state, and in the onSortEnd handler use arrayMove with oldIndex and newIndex to update that state.

The library does not add any styles. The README says it is meant to enhance your existing components, so your own CSS controls how the list looks.

SortableElement wraps each item component.
SortableContainer wraps the list and receives onSortEnd.
onSortEnd gives you oldIndex and newIndex for the 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>
  );
});

Configure the container with common props

The SortableContainer accepts props that control behaviour. The axis prop sets sorting direction: x for horizontal, y for vertical (the default), or xy for a grid. lockAxis restricts movement to one axis while sorting, which the README notes HTML5 Drag & Drop cannot do. helperClass lets you add a class to the drag helper so you can style it.

The README's features list also mentions a drag handle, auto-scrolling, events, and support for virtualization libraries such as react-virtualized. Check the documentation's prop table for the full list and default values.

axis: x, y (default) or xy
lockAxis: x or y
helperClass: a CSS class for the dragged helper element
transitionDuration: default 300

What people use it for

Reordering items in an existing React list, such as a to-do list or playlist, by dragging.
Adding touch-friendly sorting to a list in a mobile web view without writing custom drag logic.
Sorting a grid or horizontal row of items by setting the axis prop.
Maintaining a legacy React app that already depends on react-sortable-hoc.

Frequently asked questions

Is react-sortable-hoc still maintained?

No. The README says the library is no longer actively maintained and will only receive critical security updates. No new features are planned.

What should I use instead of react-sortable-hoc?

The README strongly encourages new projects to use @dnd-kit, which the maintainers say provides feature parity with a more modern architecture and built-in accessibility features. react-dnd and react-beautiful-dnd are other comparable projects named in the analysis.

How do I install react-sortable-hoc?

Run npm install react-sortable-hoc --save in your project. You also need Node.js and npm, and a React project with a module bundler such as webpack.

Is react-sortable-hoc free to use?

The project is licensed under the MIT licence, as listed in the repository metadata. Check the LICENSE file in the repository for the full terms.

Does react-sortable-hoc work on touch devices?

Yes. The README lists touch support as a feature, and says the library is touch-friendly for sortable lists.

Does react-sortable-hoc come with styles?

No. The README says it does not come with any styles by default, since it is meant to enhance your existing components.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

react-sortable-hoc is a simple, MIT-licensed way to add touch-friendly, keyboard-accessible sorting to an existing React list, and it fits teams already using it that only need security fixes. For new projects, the README clearly points to @dnd-kit, because this library receives no new features and may break if React removes findDOMNode.

Install options & downloads