Reorder

Reorder is a component that allows you to change the order of items using drag and drop.

Import

import { Reorder, ReorderItem, ReorderTrigger } from "@yamada-ui/react"

Copied!

Reorder: A wrapper component that controls the child elements (ReorderItem).
ReorderItem: A component for items that can be dragged and dropped.
ReorderTrigger: A component that displays a draggable icon.

Usage

Editable example

<Reorder>
  <ReorderItem value="ギニュー">ギニュー</ReorderItem>
  <ReorderItem value="リクーム">リクーム</ReorderItem>
  <ReorderItem value="バータ">バータ</ReorderItem>
  <ReorderItem value="ジース">ジース</ReorderItem>
  <ReorderItem value="グルド">グルド</ReorderItem>
</Reorder>

Copied!

Alternatively, you can omit ReorderItem by setting items.

Editable example

const items = useMemo<ReorderGenerateItem[]>(
  () => [
    { label: "ギニュー", value: "ギニュー" },
    { label: "リクーム", value: "リクーム" },
    { label: "バータ", value: "バータ" },
    { label: "ジース", value: "ジース" },
    { label: "グルド", value: "グルド" },
  ],
  [],
)

return <Reorder items={items} />

Copied!

Change Variants

Editable example

<VStack separator={<Separator />}>
  <Reorder variant="outline">
    <ReorderItem value="ギニュー">ギニュー</ReorderItem>
    <ReorderItem value="リクーム">リクーム</ReorderItem>
    <ReorderItem value="バータ">バータ</ReorderItem>
    <ReorderItem value="ジース">ジース</ReorderItem>
    <ReorderItem value="グルド">グルド</ReorderItem>
  </Reorder>

  <Reorder variant="elevated">
    <ReorderItem value="ギニュー">ギニュー</ReorderItem>
    <ReorderItem value="リクーム">リクーム</ReorderItem>
    <ReorderItem value="バータ">バータ</ReorderItem>
    <ReorderItem value="ジース">ジース</ReorderItem>
    <ReorderItem value="グルド">グルド</ReorderItem>
  </Reorder>

  <Reorder variant="unstyled">
    <ReorderItem value="ギニュー">ギニュー</ReorderItem>
    <ReorderItem value="リクーム">リクーム</ReorderItem>
    <ReorderItem value="バータ">バータ</ReorderItem>
    <ReorderItem value="ジース">ジース</ReorderItem>
    <ReorderItem value="グルド">グルド</ReorderItem>
  </Reorder>
</VStack>

Copied!

Change Size

Editable example

<VStack separator={<Separator />}>
  <Reorder size="sm">
    <ReorderItem value="ギニュー">ギニュー</ReorderItem>
    <ReorderItem value="リクーム">リクーム</ReorderItem>
    <ReorderItem value="バータ">バータ</ReorderItem>
    <ReorderItem value="ジース">ジース</ReorderItem>
    <ReorderItem value="グルド">グルド</ReorderItem>
  </Reorder>

  <Reorder size="md">
    <ReorderItem value="ギニュー">ギニュー</ReorderItem>
    <ReorderItem value="リクーム">リクーム</ReorderItem>
    <ReorderItem value="バータ">バータ</ReorderItem>
    <ReorderItem value="ジース">ジース</ReorderItem>
    <ReorderItem value="グルド">グルド</ReorderItem>
  </Reorder>

  <Reorder size="normal">
    <ReorderItem value="ギニュー">ギニュー</ReorderItem>
    <ReorderItem value="リクーム">リクーム</ReorderItem>
    <ReorderItem value="バータ">バータ</ReorderItem>
    <ReorderItem value="ジース">ジース</ReorderItem>
    <ReorderItem value="グルド">グルド</ReorderItem>
  </Reorder>

  <Reorder size="lg">
    <ReorderItem value="ギニュー">ギニュー</ReorderItem>
    <ReorderItem value="リクーム">リクーム</ReorderItem>
    <ReorderItem value="バータ">バータ</ReorderItem>
    <ReorderItem value="ジース">ジース</ReorderItem>
    <ReorderItem value="グルド">グルド</ReorderItem>
  </Reorder>
</VStack>

Copied!

Change Orientation

To change the orientation, set orientation to vertical or horizontal. By default, vertical is set.

Editable example

<VStack separator={<Separator />}>
  <Reorder orientation="vertical">
    <ReorderItem value="ギニュー">ギニュー</ReorderItem>
    <ReorderItem value="リクーム">リクーム</ReorderItem>
    <ReorderItem value="バータ">バータ</ReorderItem>
    <ReorderItem value="ジース">ジース</ReorderItem>
    <ReorderItem value="グルド">グルド</ReorderItem>
  </Reorder>

  <Reorder orientation="horizontal">
    <ReorderItem value="ギニュー">ギニュー</ReorderItem>
    <ReorderItem value="リクーム">リクーム</ReorderItem>
    <ReorderItem value="バータ">バータ</ReorderItem>
    <ReorderItem value="ジース">ジース</ReorderItem>
    <ReorderItem value="グルド">グルド</ReorderItem>
  </Reorder>
</VStack>

Copied!

Limit the Draggable Area

To limit the draggable area, use ReorderTrigger.

Editable example

<Reorder>
  <ReorderItem value="孫悟空">
    <HStack>
      <ReorderTrigger />
      <Text>孫悟空</Text>
    </HStack>
  </ReorderItem>

  <ReorderItem value="ベジータ">
    <HStack>
      <ReorderTrigger>
        <GhostIcon />
      </ReorderTrigger>
      <Text>ベジータ</Text>
    </HStack>
  </ReorderItem>
</Reorder>

Copied!

Handle Change Events

If you want to handle the event when the order of items has changed, use onChange. onChange provides the current order as an array.

Editable example

<Reorder onChange={(values) => console.log(`changed '${values.join(`', '`)}'`)}>
  <ReorderItem value="ギニュー">ギニュー</ReorderItem>
  <ReorderItem value="リクーム">リクーム</ReorderItem>
  <ReorderItem value="バータ">バータ</ReorderItem>
  <ReorderItem value="ジース">ジース</ReorderItem>
  <ReorderItem value="グルド">グルド</ReorderItem>
</Reorder>

Copied!

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.

Editable example

<Reorder
  onCompleteChange={(values) =>
    console.log(`completed '${values.join(`', '`)}'`)
  }
>
  <ReorderItem value="ギニュー">ギニュー</ReorderItem>
  <ReorderItem value="リクーム">リクーム</ReorderItem>
  <ReorderItem value="バータ">バータ</ReorderItem>
  <ReorderItem value="ジース">ジース</ReorderItem>
  <ReorderItem value="グルド">グルド</ReorderItem>
</Reorder>

Copied!

Use in a Scrollable Area

When using in an area with scrolling, set layoutScroll to true so that items can measure offsets correctly.

Editable example

<Reorder h="xs" overflowY="auto" layoutScroll>
  <ReorderItem value="ギニュー">ギニュー</ReorderItem>
  <ReorderItem value="リクーム">リクーム</ReorderItem>
  <ReorderItem value="バータ">バータ</ReorderItem>
  <ReorderItem value="ジース">ジース</ReorderItem>
  <ReorderItem value="グルド">グルド</ReorderItem>
</Reorder>

Copied!

Edit this page on GitHub

PreviousCarousel NextResizable