useSortable
Use the useSortable
hook to reorder elements in a list or across multiple lists.
Usage
The useSortable
hook requires an id
and an index
. It accepts all the same options as the Sortable
class. Refer to the Input section below for more information.
API Reference
The useSortable
hook is a thin wrapper around the Sortable class that makes it easier to create sortable elements in React. It therefore accepts all of the same input arguments.
Input
The useSortable
hook accepts all of the same arguments as the useDraggable hook and useDroppable hooks, as well as additional arguments that are specific to sortable elements.
The identifier of the sortable element. Should be unique within the same drag and drop context provider.
The index of the sortable element. This is used to determine the position of the element in the list.
Optionally supply a transition to animate the sortable element when it is being sorted.
If you already have a reference to the element, you can pass it to the element
option instead of using the ref
that is returned by the useSortable
hook to connect the sortable element.
If you already have a reference to the drag handle element, you can pass it to the handle
option instead of using the handleRef
that is returned by the useSortable
hook to connect the sortable handle element.
An array of modifiers that can be used to modify or restrict the behavior of the sortable element.
An array of sensors that can be bound to the sortable element to detect drag interactions.
If you already have a reference to the element you want to use as the droppable target for this sortable element, you can pass it to the target
option instead of using the targetRef
that is returned by the useSortable
hook.
Optionally supply a type of draggable element to only allow it to be dropped over certina droppable targets that accept this type
.
Optionally supply a collision detector function can be used to detect collisions between the droppable element and draggable elements.
Optionally supply a number to set the collision priority of the droppable target of this sortable element. The higher the number, the higher the priority when detecting collisions. This can be useful if there are multiple droppable elements that overlap.
Set to true
to prevent the sortable element from being sortable.
The data argument is for advanced use-cases where you may need access to additional data about the sortable element in event handlers, modifiers, sensors or custom plugins.
useSortable
hook element is unmounted.Output
The useSortable
hook returns an object containing the following properties:
A React ref that can be assigned to the element you want to connect as the draggable element and droppable target for this sortable instance.
A React ref that can be assigned to the element you want to use as the droppable target for this sortable element.
A React ref that can be assigned to the element you want to use as the draggable source element for this sortable element.
A React ref that can be assigned to the element you want to use as the drag handle element for this sortable element.
A boolean value that indicates whether the sortable element is currently a drop target.
A boolean value that indicates whether the sortable element is currently being dragged.