react-sortable-hoc

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.