Usage

Import

import { Reorder, ReorderItem } from '@passfort/castle'
content_copy
Copy

Example

<Reorder>
  <ReorderItem id="a">
    <Item label="Item A" />
  </ReorderItem>
  <ReorderItem id="b">
    <Item label="Item B" />
  </ReorderItem>
  <ReorderItem id="c">
    <Item label="Item C" />
  </ReorderItem>
</Reorder>
<Reorder>
  <ReorderItem id="a">
    <Item label="Item A" />
  </ReorderItem>
  <ReorderItem id="b">
    <Item label="Item B" />
  </ReorderItem>
  <ReorderItem id="c">
    <Item label="Item C" />
  </ReorderItem>
</Reorder>
content_copy
Copy
live example

Controlled

use onReorder to get the new order of the items when they have been reordered.

function Example() {
  const [items, setItems] = useState([
    { id: 'item1', label: 'Item 1' },
    { id: 'item2', label: 'Item 2' },
    { id: 'item3', label: 'Item 3' },
  ])

  const handleReorder = (newOrder) => {
    const reorderedItems = newOrder.map((id) =>
      items.find((item) => item.id === id),
    )
    setItems(reorderedItems)
  }

  return (
    <Reorder canRemove onReorder={handleReorder}>
      {items.map((item) => (
        <ReorderItem id={item.id} key={item.id}>
          <Item label={item.label} />
        </ReorderItem>
      ))}
    </Reorder>
  )
}
function Example() {
  const [items, setItems] = useState([
    { id: 'item1', label: 'Item 1' },
    { id: 'item2', label: 'Item 2' },
    { id: 'item3', label: 'Item 3' },
  ])

  const handleReorder = (newOrder) => {
    const reorderedItems = newOrder.map((id) =>
      items.find((item) => item.id === id),
    )
    setItems(reorderedItems)
  }

  return (
    <Reorder canRemove onReorder={handleReorder}>
      {items.map((item) => (
        <ReorderItem id={item.id} key={item.id}>
          <Item label={item.label} />
        </ReorderItem>
      ))}
    </Reorder>
  )
}
content_copy
Copy
live example