React Sortable HOC

React Sortable HOC provides SortableContainer, SortableElement, and SortableHandle higher-order components that wrap existing React components to add smooth, animated drag-to-reorder behavior — without relying on the HTML5 Drag & Drop API, which has known limitations around touch devices, axis locking, and animation. It supports horizontal, vertical, and grid sorting, works alongside virtualization libraries, and includes keyboard-accessible sorting out of the box.

The project is no longer under active feature development: the maintainer has redirected new development effort to @dnd-kit, a modern successor with feature parity and built-in accessibility, and warns that react-sortable-hoc depends on React’s findDOMNode, which is slated for eventual removal. It still receives critical security updates and remains widely used in production codebases that adopted it before the deprecation notice.

What You Get

• SortableContainer, SortableElement, and SortableHandle higher-order components for composing sortable lists
• Support for horizontal, vertical, or grid (xy) sorting axes
• Keyboard-accessible sorting with configurable key codes
• Compatibility with virtualization libraries like react-virtualized and react-tiny-virtual-list
• Touch support and configurable press delay/threshold for mobile drag activation
• Smooth 60fps animated reordering without relying on the HTML5 Drag & Drop API

Common Use Cases

• Reorderable to-do lists, kanban cards, or settings panels
• Drag-to-reorder image galleries or file upload queues
• Sortable table rows or grid layouts that also need keyboard accessibility
• Lists rendered with virtualization libraries that still need drag-to-reorder support

Under The Hood

Architecture - The library is organized around three HOC factories under src/: SortableContainer/ manages the shared drag state (active index, position deltas) and owns the pointer/touch event listeners; SortableElement/ wraps individual list items so they can report their DOM node and index back to the container; SortableHandle/ restricts drag initiation to a sub-element rather than the whole item. AutoScroller/ implements edge-of-viewport auto-scrolling during a drag, and Manager/ tracks the registered sortable elements and their positions so the container can compute reordering and animate the shift with CSS transforms rather than reflowing the DOM. Tech Stack - Written in plain JavaScript (ES2015+) with rollup.config.js producing CommonJS, ESM, and UMD builds; it has invariant and prop-types-style runtime checks but no TypeScript source (type declarations are hand-maintained under types/). Code Quality - The examples/ directory doubles as manual integration coverage for the various axis/handle/virtualization configurations documented in the README; the project predates widespread adoption of automated component testing tools in this ecosystem, and the maintainer’s own deprecation notice acknowledges the architecture’s dependence on the deprecated findDOMNode API as a structural risk going forward. API Design - The higher-order-component pattern (SortableContainer(ListComponent), SortableElement(ItemComponent)) lets consumers add sortable behavior to existing components without restructuring them, which was ergonomic for the HOC era but is a heavier integration model than the render-prop/hooks-based API of its suggested successor, @dnd-kit.