react-easy-sort

To implement a sortable list, use SortableList as the container and wrap each list item in a SortableItem. You must provide an onSortEnd callback to update your state when the sorting gesture is completed. It is recommended to use a utility like arrayMoveImmutable from the array-move package to handle the array reordering.

import SortableList, { SortableItem } from 'react-easy-sort'
import { arrayMoveImmutable } from 'array-move'

const App = () => {
  const [items, setItems] = React.useState(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'])

  const onSortEnd = (oldIndex: number, newIndex: number) => {
    setItems((array) => arrayMoveImmutable(array, oldIndex, newIndex))
  }

  return (
    <SortableList onSortEnd={onSortEnd} className="list" draggedItemClassName="dragged">
      {items.map((item) => (
        <SortableItem key={item}>
          <div className="item">{item}</div>
        </SortableItem>
      ))}
    </SortableList>
  )
}

If you do not want the entire item to be draggable, wrap a specific area of the item in a SortableKnob. This allows the user to initiate the drag gesture only through that specific element. Like SortableItem, the child of SortableKnob must be a single React element that can receive a ref (use React.forwardRef() for custom components).

import SortableList, { SortableItem, SortableKnob } from 'react-easy-sort'
import arrayMove from 'array-move'

const App = () => {
  const [items, setItems] = React.useState(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'])

  const onSortEnd = (oldIndex: number, newIndex: number) => {
    setItems((array) => arrayMove(array, oldIndex, newIndex))
  }

  return (
    <SortableList onSortEnd={onSortEnd} className="list" draggedItemClassName="dragged">
      {items.map((item) => (
        <SortableItem key={item}>
          <div className="item">
            <SortableKnob>
              <div>Drag me</div>
            </SortableKnob>
            {item}
          </div>
        </SortableItem>
      ))}
    </SortableList>
  )
}

The SortableList component accepts the following props:

Note: onSortEnd is required.

The SortableList component accepts several props to control the sorting behavior and UI:

• onSortEnd: (Required) Callback function called when a sorting gesture finishes. Receives (oldIndex: number, newIndex: number).
• onSortStart: Optional callback called when the user starts a sorting gesture.
• onSortMove: Optional callback called when an item's position changes during a gesture. Receives (newIndex: number).
• allowDrag: Boolean. Determines whether drag functionality is enabled (defaults to true).
• as: Determines the HTML tag used for the container element (defaults to 'div').
• draggedItemClassName: A string of CSS classes applied to the cloned element being dragged.
• lockAxis: 'x' | 'y'. Locks the drag movement to a specific axis.
• autoScroll: Boolean. Enables automatic scrolling of the container or window when dragging near edges (defaults to false).
• customHolderRef: A React.RefObject<HTMLElement | null> pointing to the element where the dragged clone should be appended (defaults to document.body).
• dropTarget: A React.ReactNode used as a drop target during dragging.

SortableList also accepts all standard HTMLAttributes for the chosen tag.