whatisgithub

What is react-sortable-hoc?

clauderic/react-sortable-hoc — explained in plain English

Analysis updated 2026-06-24

10,892JavaScriptAudience · developerComplexity · 2/5Setup · easy

In one sentence

A React library for adding drag-and-drop reordering to lists, grids, and tables with touch support. No longer actively maintained, the author recommends migrating to the newer @dnd-kit library instead.

Mindmap

mindmap
  root((react-sortable-hoc))
    What it does
      Drag to reorder lists
      Touch device support
      Smooth animations
    Features
      Vertical and horizontal
      Drag handles
      Axis locking
      Auto-scroll
    Status
      No longer maintained
      Migrate to dnd-kit
    Audience
      React developers
      UI builders
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add drag-and-drop reordering to a vertical or horizontal list in a React app.

USE CASE 2

Build a sortable card grid with touch support so mobile users can rearrange items.

USE CASE 3

Restrict dragging to a single axis so items in a column can only move up or down.

What is it built with?

JavaScriptReact

How does it compare?

clauderic/react-sortable-hocgooglechromelabs/ndbnaturalnode/natural
Stars10,89210,89910,873
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasyeasyeasy
Complexity2/52/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

Deprecated: depends on React's findDOMNode API which is being removed. Use @dnd-kit for new projects.

So what is it?

React Sortable HOC is a JavaScript library for React that lets you add drag-and-drop reordering to any list on a webpage. React is a popular tool for building user interfaces, and this library wraps your existing list components so that users can click and drag items to rearrange them. It works with vertical lists, horizontal lists, and grids, and includes touch support so it works on phones and tablets as well. The library uses a pattern called Higher Order Components, which is a way of adding behavior to an existing component without rewriting it. You wrap your list container and your list items with the library's wrapper functions, and the drag-and-drop behavior is added automatically. The library also handles animations during sorting, optional drag handles (so only a specific part of the item can be dragged), axis locking (restricting movement to only horizontal or only vertical), and auto-scrolling when dragging near the edge of a container. One of its stated reasons for existing is that the standard browser drag-and-drop mechanism (called HTML5 Drag and Drop) has significant limitations on mobile devices and with animations. This library avoids that mechanism and handles movement tracking on its own, which allows for smoother animation and touch support. Importantly, the README prominently states that this library is no longer actively maintained. The author redirected all development to a newer library called @dnd-kit, which covers the same functionality with a more modern codebase. The README notes that a React API called findDOMNode, which this library depends on internally, is being deprecated by the React team, which will eventually cause this library to stop working entirely. The author recommends that new projects use @dnd-kit instead. Installation is through npm, the standard JavaScript package manager. The package works with common build tools like webpack and also provides a version that can be loaded directly in a browser without a build step.

Copy-paste prompts

Prompt 1
Using react-sortable-hoc, create a simple React list where users can drag items up and down to reorder them, and log the new order on each drop.
Prompt 2
Show me how to add a drag handle to a sortable list item with react-sortable-hoc so only the handle icon triggers dragging.
Prompt 3
How do I implement auto-scrolling when a user drags an item near the bottom of a container using react-sortable-hoc?
Prompt 4
Walk me through migrating an existing react-sortable-hoc sortable list to @dnd-kit, the library the original author now recommends.
Prompt 5
How do I lock dragging to vertical movement only in react-sortable-hoc?

Frequently asked questions

What is react-sortable-hoc?

A React library for adding drag-and-drop reordering to lists, grids, and tables with touch support. No longer actively maintained, the author recommends migrating to the newer @dnd-kit library instead.

What language is react-sortable-hoc written in?

Mainly JavaScript. The stack also includes JavaScript, React.

How hard is react-sortable-hoc to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is react-sortable-hoc for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.