Reordering

Move items up or down with arrow buttons.

ReorderList displays labels with up and down arrows. It handles spacing, scrolling and moving items.

Example

import { useState } from "react";
import { ReorderList, Screen } from "ink";

export default function Reordering() {
  const [items, setItems] = useState([
    { id: "1", name: "Item 1" },
    { id: "2", name: "Item 2" },
    { id: "3", name: "Item 3" },
    { id: "4", name: "Item 4" },
  ]);

  return <Screen title="Reordering">
    <ReorderList
      items={items}
      keyExtractor={item => item.id}
      getLabel={item => item.name}
      onChange={setItems}
    />
  </Screen>;
}

Use a unique, stable ID for each item. onChange receives a new array in the selected order.

This example keeps the order until the app closes. Use Store to save it between sessions.

Four items in order, with down and up arrows beside each row. The first up arrow and last down arrow are disabled.

Item 1 has moved below Item 2. Item 3 and Item 4 keep their positions.

Use gap to set the spacing between rows. It defaults to 47 logical units, matching List.

Scrolling

The component automatically shows a scrollbar when items overflow.

The bottom of the eight-item list. Item 8 has a disabled down arrow and the scrollbar is at the bottom.

Long names

Labels use one line by default. Long names end with an ellipsis, leaving room for both arrows.

A long name ends with an ellipsis before the arrows. Eight rows make the screen scroll, with a scrollbar on the right.

Multiline names

Set multiline to show the full label.

<ReorderList
  items={items}
  keyExtractor={item => item.id}
  getLabel={item => item.name}
  onChange={setItems}
  multiline
/>