Reorder
Reorder is a component that allows you to change the order of items using drag and drop.
- 虎杖悠仁
- 伏黒恵
- 釘崎野薔薇
- 五条悟
- 七海建人
<Reorder.Root>
<Reorder.Item value="虎杖悠仁">虎杖悠仁</Reorder.Item>
<Reorder.Item value="伏黒恵">伏黒恵</Reorder.Item>
<Reorder.Item value="釘崎野薔薇">釘崎野薔薇</Reorder.Item>
<Reorder.Item value="五条悟">五条悟</Reorder.Item>
<Reorder.Item value="七海建人">七海建人</Reorder.Item>
</Reorder.Root>
Usage
import { Reorder } from "@yamada-ui/react"
import { Reorder } from "@/components/ui"
import { Reorder } from "@workspaces/ui"
<Reorder.Root>
<Reorder.Item value="虎杖悠仁">虎杖悠仁</Reorder.Item>
<Reorder.Item value="伏黒恵">伏黒恵</Reorder.Item>
<Reorder.Item value="釘崎野薔薇">釘崎野薔薇</Reorder.Item>
</Reorder.Root>
Use items
- 虎杖悠仁
- 伏黒恵
- 釘崎野薔薇
- 五条悟
- 七海建人
const items = useMemo<Reorder.Item[]>(
() => [
{ value: "虎杖悠仁", label: "虎杖悠仁" },
{ value: "伏黒恵", label: "伏黒恵" },
{ value: "釘崎野薔薇", label: "釘崎野薔薇" },
{ value: "五条悟", label: "五条悟" },
{ value: "七海建人", label: "七海建人" },
],
[],
)
return <Reorder.Root items={items} />
Change Variant
- 虎杖悠仁
- 伏黒恵
- 釘崎野薔薇
- 虎杖悠仁
- 伏黒恵
- 釘崎野薔薇
- 虎杖悠仁
- 伏黒恵
- 釘崎野薔薇
- 虎杖悠仁
- 伏黒恵
- 釘崎野薔薇
- 虎杖悠仁
- 伏黒恵
- 釘崎野薔薇
- 虎杖悠仁
- 伏黒恵
- 釘崎野薔薇
- 虎杖悠仁
- 伏黒恵
- 釘崎野薔薇
const items = useMemo<Reorder.Item[]>(
() => [
{ value: "虎杖悠仁", label: "虎杖悠仁" },
{ value: "伏黒恵", label: "伏黒恵" },
{ value: "釘崎野薔薇", label: "釘崎野薔薇" },
],
[],
)
return (
<VStack separator={<Separator />}>
<Reorder.Root variant="panel" items={items} />
<Reorder.Root variant="outline" items={items} />
<Reorder.Root variant="solid" items={items} />
<Reorder.Root variant="subtle" items={items} />
<Reorder.Root variant="surface" items={items} />
<Reorder.Root variant="elevated" items={items} />
<Reorder.Root variant="plain" items={items} />
</VStack>
)
Change Size
- 虎杖悠仁
- 伏黒恵
- 釘崎野薔薇
- 虎杖悠仁
- 伏黒恵
- 釘崎野薔薇
- 虎杖悠仁
- 伏黒恵
- 釘崎野薔薇
- 虎杖悠仁
- 伏黒恵
- 釘崎野薔薇
const items = useMemo<Reorder.Item[]>(
() => [
{ value: "虎杖悠仁", label: "虎杖悠仁" },
{ value: "伏黒恵", label: "伏黒恵" },
{ value: "釘崎野薔薇", label: "釘崎野薔薇" },
],
[],
)
return (
<VStack separator={<Separator />}>
<Reorder.Root size="sm" items={items} />
<Reorder.Root size="md" items={items} />
<Reorder.Root size="lg" items={items} />
<Reorder.Root size="xl" items={items} />
</VStack>
)
Change Orientation
To change the orientation, set orientation to "vertical" or "horizontal". By default, "vertical" is set.
- 虎杖悠仁
- 伏黒恵
- 釘崎野薔薇
- 五条悟
- 虎杖悠仁
- 伏黒恵
- 釘崎野薔薇
- 五条悟
const items = useMemo<Reorder.Item[]>(
() => [
{ value: "虎杖悠仁", label: "虎杖悠仁" },
{ value: "伏黒恵", label: "伏黒恵" },
{ value: "釘崎野薔薇", label: "釘崎野薔薇" },
{ value: "五条悟", label: "五条悟" },
],
[],
)
return (
<VStack separator={<Separator />}>
<Reorder.Root orientation="vertical" items={items} />
<Reorder.Root orientation="horizontal" items={items} />
</VStack>
)
Limit the Draggable Area
To limit the draggable area, use ReorderTrigger.
虎杖悠仁
伏黒恵
釘崎野薔薇
<Reorder.Root>
<Reorder.Item value="虎杖悠仁">
<HStack>
<Reorder.Trigger />
<Text>虎杖悠仁</Text>
</HStack>
</Reorder.Item>
<Reorder.Item value="伏黒恵">
<HStack>
<Reorder.Trigger>
<GhostIcon />
</Reorder.Trigger>
<Text>伏黒恵</Text>
</HStack>
</Reorder.Item>
<Reorder.Item value="釘崎野薔薇">
<HStack>
<Reorder.Trigger />
<Text>釘崎野薔薇</Text>
</HStack>
</Reorder.Item>
</Reorder.Root>
Handle Completion Events
If you want to handle the event when the user's drag and drop has finished and the order of items is completed, use onCompleteChange. onCompleteChange provides the completed order as an array.
Completed order: 虎杖悠仁, 伏黒恵, 釘崎野薔薇, 五条悟
- 虎杖悠仁
- 伏黒恵
- 釘崎野薔薇
- 五条悟
const items = useMemo<Reorder.Item[]>(
() => [
{ value: "虎杖悠仁", label: "虎杖悠仁" },
{ value: "伏黒恵", label: "伏黒恵" },
{ value: "釘崎野薔薇", label: "釘崎野薔薇" },
{ value: "五条悟", label: "五条悟" },
],
[],
)
const [completedOrder, setCompletedOrder] = useState([
"虎杖悠仁",
"伏黒恵",
"釘崎野薔薇",
"五条悟",
])
return (
<VStack>
<Text>Completed order: {completedOrder.join(", ")}</Text>
<Reorder.Root
items={items}
onCompleteChange={(values) => setCompletedOrder(values)}
/>
</VStack>
)
Use in Scrollable Area
When using in an area with scroll, set layoutScroll to true to ensure items can measure their offsets correctly.
- 虎杖悠仁
- 伏黒恵
- 釘崎野薔薇
- 五条悟
- 七海建人
const items = useMemo<Reorder.Item[]>(
() => [
{ value: "虎杖悠仁", label: "虎杖悠仁" },
{ value: "伏黒恵", label: "伏黒恵" },
{ value: "釘崎野薔薇", label: "釘崎野薔薇" },
{ value: "五条悟", label: "五条悟" },
{ value: "七海建人", label: "七海建人" },
],
[],
)
return (
<VStack h="xs" overflowY="auto">
<Reorder.Root layoutScroll items={items} />
</VStack>
)
Control
Current order: 虎杖悠仁, 伏黒恵, 釘崎野薔薇, 五条悟
- 虎杖悠仁
- 伏黒恵
- 釘崎野薔薇
- 五条悟
const items = useMemo<Reorder.Item[]>(
() => [
{ value: "虎杖悠仁", label: "虎杖悠仁" },
{ value: "伏黒恵", label: "伏黒恵" },
{ value: "釘崎野薔薇", label: "釘崎野薔薇" },
{ value: "五条悟", label: "五条悟" },
],
[],
)
const [values, setValues] = useState([
"虎杖悠仁",
"伏黒恵",
"釘崎野薔薇",
"五条悟",
])
return (
<VStack>
<Text>Current order: {values.join(", ")}</Text>
<Reorder.Root
items={items}
onChange={(newValues) => setValues(newValues)}
/>
</VStack>
)
"use client" to the top of the file.Props
Similar Components
Breadcrumb
Breadcrumb is a component that helps users understand the hierarchy of a website.
DataList
DataList is used to display a list of data items.
InfiniteScrollArea
InfiniteScrollArea is a component that provides infinite scrolling functionality. This component offers a smooth scrolling experience by automatically loading and displaying the next dataset when the end of the component is reached.
List
List is a component for displaying lists. By default, it renders a ul element.
NativeAccordion
NativeAccordion is a component for a list that displays information in an expandable or collapsible manner using the HTML details element.
Resizable
Resizable is accessible resizable panel groups and layouts with keyboard support.