Introduction
API Documentation
Guides
Sortable Context
Props
Items
It requires that you pass it a sorted array of the unique identifiers associated with the elements that use the
useSortable hook within it.1
import React, {useState} from 'react';
2
import {DndContext} from '@dnd-kit/core';
3
import {SortableContext} from '@dnd-kit/sortable';
4
5
function App() {
6
const [items] = useState([1, 2, 3]);
7
8
return (
9
<DndContext>
10
<SortableContext items={items}>
11
{/* ... */}
12
</SortableContext>
13
</DndContext>
14
);
15
}
Copied!
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
The
SortableContext 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.
Make sure to use the sorting strategy that is the most adapted to the use case you are building for.
For advanced use cases, you may also build custom sorting strategies. To do so, make sure that the custom strategy you are building accepts the arguments that are passed to a sorting strategy and adheres to the return values that are expected. For more details on this, refer to the implementation of the built-in sorting strategies.
Identifier
The
SortableContext 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. You may nest multiple
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:1
// Bad, missing parent <DndContext>
2
<SortableContext>
3
{/* ... */}
4
</SortableContext>
5
6
// Good, basic setup
7
<DndContext>
8
<SortableContext>
9
{/* ... */}
10
</SortableContext>
11
</DndContext>
12
13
// Good, multiple sibling Sortable contexts
14
<DndContext>
15
<SortableContext>
16
{/* ... */}
17
</SortableContext>
18
<SortableContext>
19
{/* ... */}
20
</SortableContext>
21
</DndContext>
22
23
// Good, nested DndContexts
24
<DndContext>
25
<SortableContext items={["A, "B", "C"]}>
26
<DndContext>
27
<SortableContext items={["A, "B", "C"]}>
28
{/* ... */}
29
</SortableContext>
30
</DndContext>
31
</SortableContext>
32
</DndContext>
33
34
// Bad, nested Sortable contexts with `id` collisions
35
<DndContext>
36
<SortableContext items={["A, "B", "C"]}>
37
<SortableContext items={["A, "B", "C"]}>
38
{/* ... */}
39
</SortableContext>
40
</SortableContext>
41
</DndContext>
42
43
// Good, nested Sortable contexts with unique `id`s
44
<DndContext>
45
<SortableContext items={["A, "B", "C"]}>
46
<SortableContext items={[1, 2, 3]}>
47
{/* ... */}
48
</SortableContext>
49
</SortableContext>
50
</DndContext>
51
Copied!
Last modified 1d ago
Copy link
Edit on GitHub