Resizable

Panels you can resize by dragging or with the keyboard.

Import

tsx

import { Resizable } from "@indoku/ui"

Examples

Basic usage

One

Two

Three

tsx

function ResizableDemo() {  const cell = (label: string) => (    <Flex h="full" align="center" justify="center" fontWeight="semibold">      {label}    </Flex>  )  return (    <Resizable.PanelGroup h="56" maxW="xl" rounded="l3" borderWidth="1px">      <Resizable.Panel defaultSize={40} minSize={20}>        {cell("One")}      </Resizable.Panel>      <Resizable.Handle withHandle />      <Resizable.Panel>        <Resizable.PanelGroup direction="vertical">          <Resizable.Panel defaultSize={50}>{cell("Two")}</Resizable.Panel>          <Resizable.Handle withHandle />          <Resizable.Panel>{cell("Three")}</Resizable.Panel>        </Resizable.PanelGroup>      </Resizable.Panel>    </Resizable.PanelGroup>  )}

Props

Panel

Prop	Type	Default	Description
`defaultSize`	`number`	–	Percent (0–100). Panels without a `defaultSize` share the remaining space equally.
`minSize`	`number`	–
`maxSize`	`number`	–

PanelGroup

Prop	Type	Default	Description
`direction`	`Direction`	–
`onLayout`	`(sizes: number[]) => void`	–	Called whenever sizes change (array of percents, in panel order).

Handle

Prop	Type	Default	Description
`withHandle`	`boolean`	–	Show a small grip in the middle of the line.
`step`	`number`	`5`	Keyboard step in percent.

* required. Style props and HTML attributes are accepted as well.

← File Tree Scroll Area →

Created by @indokudev