Resizable

PreviousNext

Horizontally resizable panel.

import { Resizable } from "@/rl-ui";

<Resizable initialWidth={240} minWidth={160} maxWidth={400}>
<div className="p-3">Resizable content</div>
</Resizable>

Examples

Different initial widths

import { Resizable, Text } from "@/rl-ui";

<>
<Resizable initialWidth={160} minWidth={120} maxWidth={280}>
  <Text variant="body-short-01">Narrow</Text>
</Resizable>
<Resizable initialWidth={280} minWidth={160} maxWidth={420}>
  <Text variant="body-short-01">Wide</Text>
</Resizable>
</>

Disabled

import { Resizable, Text } from "@/rl-ui";

<Resizable initialWidth={200} disabled>
<Text variant="body-short-01">Locked width</Text>
</Resizable>

Hide content

import { Resizable, Text } from "@/rl-ui";

<Resizable initialWidth={200} hideContent>
<Text variant="body-short-01">Hidden while collapsed</Text>
</Resizable>

API

PropTypeDefaultDescription
initialWidthnumber—Starting width in px (required).
minWidthnumber0Minimum width.
maxWidthnumberInfinityMaximum width.
offsetnumber0Pointer offset adjustment while dragging.
disabledbooleanfalseDisable the resize handle.
hideContentbooleanfalseHide children while keeping the shell/handle.
onChange(width: number) => void—Fires while resizing.
onResizeStart(width: number) => void—Fires when a drag starts.
onResizeStop(width: number) => void—Fires when a drag ends.
onDoubleClick(width: number) => void—Double-click handle (often toggles min/max).