Reorder

Reorderは、項目の順序をドラッグアンドドロップで変更できるコンポーネントです。

虎杖悠仁
伏黒恵
釘崎野薔薇
五条悟
七海建人

<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>

使い方

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>

itemsを使う

虎杖悠仁
伏黒恵
釘崎野薔薇
五条悟
七海建人

const items = useMemo<Reorder.Item[]>(
  () => [
    { value: "虎杖悠仁", label: "虎杖悠仁" },
    { value: "伏黒恵", label: "伏黒恵" },
    { value: "釘崎野薔薇", label: "釘崎野薔薇" },
    { value: "五条悟", label: "五条悟" },
    { value: "七海建人", label: "七海建人" },
  ],
  [],
)

return <Reorder.Root items={items} />

バリアントを変更する

虎杖悠仁
伏黒恵
釘崎野薔薇

虎杖悠仁
伏黒恵
釘崎野薔薇

虎杖悠仁
伏黒恵
釘崎野薔薇

虎杖悠仁
伏黒恵
釘崎野薔薇

虎杖悠仁
伏黒恵
釘崎野薔薇

虎杖悠仁
伏黒恵
釘崎野薔薇

虎杖悠仁
伏黒恵
釘崎野薔薇

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>
)

サイズを変更する

虎杖悠仁
伏黒恵
釘崎野薔薇

虎杖悠仁
伏黒恵
釘崎野薔薇

虎杖悠仁
伏黒恵
釘崎野薔薇

虎杖悠仁
伏黒恵
釘崎野薔薇

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>
)

方向を変更する

方向を変更する場合は、orientationにverticalまたは"horizontal"を設定します。デフォルトでは、"vertical"が設定されています。

虎杖悠仁
伏黒恵
釘崎野薔薇
五条悟

虎杖悠仁
伏黒恵
釘崎野薔薇
五条悟

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>
)

ドラッグアンドドロップ可能な領域を限定する

ドラッグアンドドロップ可能な領域を限定する場合は、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>

完了のイベントをハンドルする

ユーザーのドラッグアンドドロップが終了し、項目の順序が完了されたイベントをハンドルする場合は、onCompleteChangeを使用します。onCompleteChangeは、完了した順序を配列で提供します。

完了時の順序: 虎杖悠仁, 伏黒恵, 釘崎野薔薇, 五条悟

虎杖悠仁
伏黒恵
釘崎野薔薇
五条悟

const items = useMemo<Reorder.Item[]>(
  () => [
    { value: "虎杖悠仁", label: "虎杖悠仁" },
    { value: "伏黒恵", label: "伏黒恵" },
    { value: "釘崎野薔薇", label: "釘崎野薔薇" },
    { value: "五条悟", label: "五条悟" },
  ],
  [],
)
const [completedOrder, setCompletedOrder] = useState([
  "虎杖悠仁",
  "伏黒恵",
  "釘崎野薔薇",
  "五条悟",
])

return (
  <VStack>
    <Text>完了時の順序: {completedOrder.join(", ")}</Text>
    <Reorder.Root
      items={items}
      onCompleteChange={(values) => setCompletedOrder(values)}
    />
  </VStack>
)

スクロール可能な領域で使う

スクロールがある領域で使う場合は、項目がオフセットを正しく測定できるようにlayoutScrollをtrueに設定します。

虎杖悠仁
伏黒恵
釘崎野薔薇
五条悟
七海建人

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>
)

制御する

現在の順序: 虎杖悠仁, 伏黒恵, 釘崎野薔薇, 五条悟

虎杖悠仁
伏黒恵
釘崎野薔薇
五条悟

const items = useMemo<Reorder.Item[]>(
  () => [
    { value: "虎杖悠仁", label: "虎杖悠仁" },
    { value: "伏黒恵", label: "伏黒恵" },
    { value: "釘崎野薔薇", label: "釘崎野薔薇" },
    { value: "五条悟", label: "五条悟" },
  ],
  [],
)
const [values, setValues] = useState([
  "虎杖悠仁",
  "伏黒恵",
  "釘崎野薔薇",
  "五条悟",
])

return (
  <VStack>
    <Text>現在の順序: {values.join(", ")}</Text>
    <Reorder.Root
      items={items}
      onChange={(newValues) => setValues(newValues)}
    />
  </VStack>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

Reorder.Root

Prop	デフォルト	型 / 説明
`as`	-	`keyof IntrinsicElements` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"md"`	`"lg" \| "md" \| "sm" \| "xl"` The size of the component.
`variant`	`"panel"`	`"elevated" \| "outline" \| "panel" \| "plain" \| "solid" \| "subtle" \| "surface" ...` The variant of the component.
`items`	-	`ReorderItemProps<Y>[]` If provided, generate reorder items based on items.
`onChange`	-	`(values: Y[]) => void` The callback invoked when reorder items are moved.
`onCompleteChange`	-	`(values: Y[]) => void` The callback invoked when the movement of reorder items is completed.
`orientation`	`"vertical"`	`"horizontal" \| "vertical"` The orientation of the reorder.

Reorder.Item

Prop	デフォルト	型 / 説明
`as`	-	`keyof IntrinsicElements` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`label`	-	`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>` The label of the reorder item.
`value`	-	`NonNullable<Y>` The value of the reorder item.

Reorder.Trigger

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.