Resizable

Two panels separated by a draggable, keyboard-accessible splitter.

ResizableProps packages/core/src/advanced-controls.ts:215 ↗

Import

import { Resizable } from "@tarve/core";

Usage

Resizable.tsx

import { Resizable, Text } from "@tarve/core";

let split = 30;

<Resizable
  size={split}
  min={20}
  max={70}
  onSizeChange={(size) => {
    split = size;
  }}
  first={<Text>Sidebar</Text>}
  second={<Text>Editor</Text>}
  style={{ height: 320 }}
/>

Props

Prop	Type	Default
`first` required	`Child`	—
`second` required	`Child`	—
`size` required	`number`	—
`disabled`	`boolean`	—
`label`	`string`	`"Resize panels"`
`max`	`number`	`90`
`min`	`number`	`10`
`onSizeChange`	`(size: number) => void`	—
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`step`	`number`	`1`

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle