react-sortable-hoc
A React helper library that makes lists drag-and-droppable with touch and keyboard support. No longer maintain
- Stars
- 10.9k
- Forks
- 955
- Licence
- MIT
- Language
- JavaScript
- Last update
- 3.2 years ago
- Type
- Library
No commits in over a year — check for forks or alternatives before adopting.
What it is
react-sortable-hoc is a set of React higher-order components. You wrap your existing list and list items with them, and the list items can then be reordered by dragging, including on touch devices, and by keyboard. The README says it is no longer actively maintained, receives only critical security updates, and that new projects should use @dnd-kit instead.
- Reorder items in a vertical list by dragging
- Make a grid or horizontal list sortable using the axis prop
- Lock dragging to one axis with lockAxis
- Sort items inside a virtualized list such as react-virtualized
Great for
- Existing React projects that already use react-sortable-hoc and need security fixes only
- Maintainers of legacy code who need touch-friendly sorting without writing their own drag logic
- Developers who want sortable lists without bundling default styles
Not ideal for
- New projects: the README strongly encourages @dnd-kit instead, since this library is no longer developed and may break if React removes findDOMNode
- Users who need new features: the README says no new features are planned
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm · A React project with a module bundler such as webpack
Install from npm
$ npm install react-sortable-hoc --save - 2
Run it
- Install the package with npm
- Import SortableContainer and SortableElement from 'react-sortable-hoc'
- Wrap your list component with SortableContainer and each item with SortableElement
- Pass an index prop to each item and an onSortEnd handler to the container that uses arrayMove to reorder your state
- 3
Get the most out of it
- Use the axis prop to choose x, y or xy sorting for horizontal, vertical or grid layouts
- Use lockAxis to restrict movement to one direction
- Use helperClass to style the element shown while dragging
- Check the examples folder in the repository for more code samples
Downloads
Strengths
- Supports touch devices and keyboard sorting, according to the README
- Wraps existing components without requiring you to change their styles
- Works with horizontal lists, vertical lists and grids
Trade-offs
- No longer actively maintained; no new features are planned
- Depends on findDOMNode, which the README says may be deprecated in future React versions and could stop working
- No default styles, so you must add your own visual styling
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| react-sortable-hoc (this) | 10.9k | Library | intermediate | 3.2 years ago | Existing React projects that already use react-sortable-hoc and need security fixes only |
| dnd-kit | 17.8k | Library | intermediate | 5 days ago | Developers building sortable lists or grids in a React, Vue, Svelte, or Solid app |
| react-dnd | 21.6k | Library | intermediate | 1.3 years ago | React developers building interfaces with draggable items such as lists, boards or sortable elements |
| dragula | 22.1k | Library | beginner | 2.4 years ago | Front-end developers who want drag-and-drop without a large framework |
| Sortable | 31.2k | Library | beginner | 8 months ago | Web developers adding reorderable lists to a site or app |
| table | 28.5k | Library | intermediate | 16 days ago | Developers building custom data tables in React, Vue, Solid, Svelte or another supported framework |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.