UI kit reference

components/ReorderTabs

Components#

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

TypeScript

function ReorderTabs(props: ReorderTabsProps): Element

Parameters
Name	Type	Description
props	`ReorderTabsProps`	Component props.

Element

ReorderTabs props
Name	Type	Description
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.

TypeScript

interface ReorderTabsProps

ReorderTabsProps properties
Name	Type	Description
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.

What a tab needs to take part in the strip.

TypeScript

interface ReorderTabState

ReorderTabState properties
Name	Type	Description
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.