# components/ReorderTabs (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/ReorderTabs.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/ReorderTabs.tsx).

## Components

### `ReorderTabs`

Component.

Renders the reorderable tab strip (see the module comment).

```ts
function ReorderTabs(props: ReorderTabsProps): Element
```

**Parameters**

- `props` (`ReorderTabsProps`): Component props.

**Returns** `Element`

**Props**

- `activeId` (`string | null`): The selected tab, scrolled into view; `null` when none is.
- `className?` (`string`): Extra classes on the strip.
- `ids` (`readonly string[]`): The tabs, in their current order.
- `label` (`string`): Accessible name of the tablist.
- `onReorder` (`(ids: readonly string[]) => void`): The new order, once per drop or keyboard move.
- `renderTab` (`(id: string, state: ReorderTabState) => ReactNode`): Draws one tab (a `role="tab"` element); `state` wires its pick, lift and keyboard move.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/ReorderTabs.tsx:47](https://github.com/Tahul/zidane/blob/main/ui/src/components/ReorderTabs.tsx#L47)

## Interfaces

### `ReorderTabsProps`

Interface.

Props of [`ReorderTabs`](https://zidane.si/docs/reference/ui-components-reorder-tabs.md#ReorderTabs).

```ts
interface ReorderTabsProps
```

**Properties**

- `activeId` (`string | null`): The selected tab, scrolled into view; `null` when none is.
- `className?` (`string`): Extra classes on the strip.
- `ids` (`readonly string[]`): The tabs, in their current order.
- `label` (`string`): Accessible name of the tablist.
- `onReorder` (`(ids: readonly string[]) => void`): The new order, once per drop or keyboard move.
- `renderTab` (`(id: string, state: ReorderTabState) => ReactNode`): Draws one tab (a `role="tab"` element); `state` wires its pick, lift and keyboard move.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/ReorderTabs.tsx:25](https://github.com/Tahul/zidane/blob/main/ui/src/components/ReorderTabs.tsx#L25)

### `ReorderTabState`

Interface.

What a tab needs to take part in the strip.

```ts
interface ReorderTabState
```

**Properties**

- `lifted` (`boolean`): Held by the pointer.
- `onMove` (`(delta: number) => void`): Moves the tab one slot left (-1) or right (+1).
- `pick` (`(run: () => void) => () => void`): Wraps the tab's pick, so the click that ends a drag doesn't pick.

Source: [ui/src/components/ReorderTabs.tsx:15](https://github.com/Tahul/zidane/blob/main/ui/src/components/ReorderTabs.tsx#L15)