# clauderic/react-sortable-hoc

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/clauderic-react-sortable-hoc).**

10,905 stars · 972 forks · JavaScript · mit

## Links

- GitHub: https://github.com/clauderic/react-sortable-hoc
- Homepage: https://clauderic.github.io/react-sortable-hoc/
- awesome-repositories: https://awesome-repositories.com/repository/clauderic-react-sortable-hoc.md

## Topics

`drag-and-drop` `dragging` `front-end` `grid` `higher-order-component` `javascript` `react` `sortable` `sorting`

## Description

React Sortable Hoc is a library for building drag-and-drop reorderable lists and grids within web applications. It provides a set of reusable components designed to integrate into the component-based architecture of React, allowing users to rearrange elements through mouse or touch input.

The library utilizes a higher-order component pattern to inject drag-and-drop state management into existing list components without requiring modifications to the underlying implementation. It employs portal-based ghost rendering to move elements outside the normal document flow, while using hardware-accelerated transform properties to update positions and maintain performance during interactions.

The project supports the creation of interactive interfaces for data-heavy applications and customizable dashboards. It includes built-in support for keyboard and touch-compatible interactions to ensure functionality across various devices and input methods.

## Tags

### User Interface & Experience

- [Sortable Lists](https://awesome-repositories.com/f/user-interface-experience/sortable-lists.md) — Provides a library for creating drag-and-drop reorderable lists and grids within React web applications.
- [React Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components.md) — Provides a collection of reusable interface elements designed to integrate seamlessly into React applications.
- [Drag and Drop Libraries](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries.md) — Provides a library of components for building interactive interfaces that allow users to rearrange elements via mouse or touch.
- [List Reordering Components](https://awesome-repositories.com/f/user-interface-experience/list-reordering-components.md) — Provides components for the visual rearrangement of items within lists or grids via drag-and-drop. ([source](https://clauderic.github.io/react-sortable-hoc/))
- [Higher-Order Components](https://awesome-repositories.com/f/user-interface-experience/functional-components/higher-order-components.md) — Uses higher-order components to inject drag-and-drop state management into existing list components without modifying their implementation.
- [Drag and Drop Utilities](https://awesome-repositories.com/f/user-interface-experience/ui-components/form-input-components/drag-and-drop-utilities.md) — Provides components and hooks for reordering elements in lists or grids via drag-and-drop.
- [Interaction Tracking](https://awesome-repositories.com/f/user-interface-experience/interaction-tracking.md) — Calculates element coordinates and dimensions in real-time to determine drop targets and reordering logic during drag interactions.
- [Portal Rendering](https://awesome-repositories.com/f/user-interface-experience/portal-rendering.md) — Renders dragged elements into separate containers outside the normal document flow to allow free movement across the viewport.
- [Accessible Interaction Patterns](https://awesome-repositories.com/f/user-interface-experience/accessible-interaction-patterns.md) — Implements keyboard-friendly and touch-compatible sorting functionality to ensure accessibility across input methods.
- [CSS Transform Animations](https://awesome-repositories.com/f/user-interface-experience/component-utilities/animation-engines/css-transform-animations.md) — Updates element positions using hardware-accelerated CSS transforms to ensure smooth movement during drag-and-drop interactions.