git404hub

what is react-sortable-hoc fr?

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

Analysis updated 2026-06-24

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

tl;dr

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.

vibe map

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

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 make with this?

VIBE 1

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

VIBE 2

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

VIBE 3

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

what's the stack?

JavaScriptReact

how it stacks up fr

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 i run it?

Difficulty · easy time til it works · 30min

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

in plain english

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.

prompts (copy fr)

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 fr?

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.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.