SortableContext
provides information via context that is consumed by the useSortable
hook.
Props
Items
It requires that you pass it a sorted array of the unique identifiers associated with the elements that use theuseSortable
hook within it.
It’s important that the
items
prop passed to SortableContext
be sorted in the same order in which the items are rendered, otherwise you may see unexpected results.Strategy
TheSortableContext
component also accepts different sorting strategies to compute transforms for the useSortable
hook. The built in strategies include:
rectSortingStrategy
: This is the default value, and is suitable for most use cases. This strategy does not support virtualized lists.verticalListSortingStrategy
: This strategy is optimized for vertical lists, and supports virtualized lists.horizontalListSortingStrategy
: This strategy is optimized for horizontal lists, and supports virtualized lists.rectSwappingStrategy
: Use this strategy to achieve swappable functionality.
Identifier
TheSortableContext
component also optionally accepts an id
prop. If an id
is not provided, one will be auto-generated for you. The id
prop is for advanced use cases. If you’re building custom sensors, you’ll have access to each sortable element’s data
prop, which will contain the containerId
associated to that sortable context.
Usage
In order for the
SortableContext
component to function properly, make sure it is a descendant of a DndContext
provider.SortableContext
providers within the same parent DndContext
provider.
You may also nest SortableContext
providers within other SortableContext
providers, either all under the same DndContext
provider or each with their own individual DndContext
providers if you would like to configure them with different options: