Adjust panel sizes with pointer and keyboard controls.
import { Resizable } from '@vrum/ui';
import { ResizablePanel, ResizableHandle } from '@vrum/ui';
<Resizable
direction={"horizontal"}
style={{"height":230,"width":"100%"}}
>
<ResizablePanel defaultSize="40%" minSize="20%"><div style={{ padding: 24 }}>Navigation</div></ResizablePanel><ResizableHandle /><ResizablePanel defaultSize="60%" minSize="20%"><div style={{ padding: 24 }}>Workspace content</div></ResizablePanel>
</Resizable>| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean | none | Disable resize functionality. |
defaultChecked | boolean | none | default checked configuration. |
defaultValue | string | number | readonly string[] | none | Initial value for an uncontrolled component. |
autoFocus | boolean | none | auto focus configuration. |
className | string | none | CSS class name. |
id | string | none | Uniquely identifies this group within an application. Falls back to `useId` when not provided. ℹ️ This value will also be assigned to the `id` and `data-testid` attributes. |
style | CSSProperties | none | style configuration. |
aria-invalid | boolean | "false" | "true" | "grammar" | "spelling" | none | Indicates the entered value does not conform to the format expected by the application. |
aria-label | string | none | Defines a string value that labels the current element. |
children | ReactNode | none | Panel and Separator components that comprise this group. |
onFocus | FocusEventHandler<HTMLDivElement> | none | on focus configuration. |
onBlur | FocusEventHandler<HTMLDivElement> | none | on blur configuration. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | none | Called when the input value changes. |
onSubmit | SubmitEventHandler<HTMLDivElement> | none | Called when the form is submitted. |
onKeyDown | KeyboardEventHandler<HTMLDivElement> | none | on key down configuration. |
onClick | MouseEventHandler<HTMLDivElement> | none | Called when the control is activated. |
onSelect | ReactEventHandler<HTMLDivElement> | none | on select configuration. |
defaultLayout | Layout | none | Default layout for the Group. ℹ️ This value allows layouts to be remembered between page reloads. ⚠️ Slight layout shift may occur when server-rendering panels with percentage-based default sizes. Refer to the documentation for suggestions on how to minimize the impact of this. |
disableCursor | boolean | none | This library sets custom mouse cursor styles to indicate drag state. Use this prop to disable that behavior for Panels and Separators in this group. |
elementRef | Ref<HTMLDivElement | null> | none | Ref attached to the root `HTMLDivElement`. |
groupRef | Ref<GroupImperativeHandle | null> | none | Exposes the following imperative API: - `getLayout(): Layout` - `setLayout(layout: Layout): void` ℹ️ The `useGroupRef` and `useGroupCallbackRef` hooks are exported for convenience use in TypeScript projects. |
onLayoutChange | ((layout: Layout) => void | undefined) | none | Called when the Group's layout is changing. ⚠️ For layout changes caused by pointer events, this method is called each time the pointer is moved. For most cases, it is recommended to use the `onLayoutChanged` callback instead. |
onLayoutChanged | ((layout: Layout, meta: LayoutChangedMeta) => void) | none | Called after the Group's layout has been changed. ℹ️ For layout changes caused by pointer events, this method is not called until the pointer has been released. This method is recommended when saving layouts to some storage api. ℹ️ The second argument contains meta information about the layout change. The `isUserInteraction` attribute signals whether the resize was caused by direct user input. It is true for resizes caused by pointer or keyboard input and false for other triggers (e.g. imperative API calls, initial mount, etc.) The `requestedLayout` attribute is the layout before constraints were applied for the current Group size; prefer it when persisting layouts. |
resizePreviewMode | ResizePreviewMode | none | Controls whether pointer dragging updates `Panel`s sizes immediately, or renders overlay separator previews until the pointer is released. Defaults to `"panel"` (immediate resizing); `"separator"` defers resizing until release. Customize previews using the `SeparatorOverlay` component. |
resizeTargetMinimumSize | { coarse: number; fine: number; } | none | Minimum size of the resizable hit target area (either `Separator` or `Panel` edge) This threshold ensures are large enough to avoid mis-clicks. - Coarse inputs (typically a finger on a touchscreen) have reduced accuracy; to ensure accessibility and ease of use, hit targets should be larger to prevent mis-clicks. - Fine inputs (typically a mouse) can be smaller ℹ️ [Apple interface guidelines](https://developer.apple.com/design/human-interface-guidelines/accessibility) suggest `20pt` (`27px`) on desktops and `28pt` (`37px`) for touch devices In practice this seems to be much larger than many of their own applications use though. |
direction | "horizontal" | "vertical" | "horizontal" | direction configuration. |
| Prop | Type | Default | Description |
|---|---|---|---|
defaultChecked | boolean | none | default checked configuration. |
defaultValue | string | number | readonly string[] | none | Initial value for an uncontrolled component. |
autoFocus | boolean | none | auto focus configuration. |
className | string | none | CSS class name. ⚠️ Class is applied to nested `HTMLDivElement` to avoid styles that interfere with Flex layout. |
id | string | none | Uniquely identifies this panel within the parent group. Falls back to `useId` when not provided. ℹ️ This prop is used to associate persisted group layouts with the original panel. ℹ️ This value will also be assigned to the `id` and `data-testid` attributes. |
style | CSSProperties | none | CSS properties. ⚠️ The default inline styles cannot be overridden, except for [`overflow`](https://react-resizable-panels.vercel.app/examples/overflow). |
aria-invalid | boolean | "false" | "true" | "grammar" | "spelling" | none | Indicates the entered value does not conform to the format expected by the application. |
aria-label | string | none | Defines a string value that labels the current element. |
children | ReactNode | none | Content rendered inside the component. |
onFocus | FocusEventHandler<HTMLDivElement> | none | on focus configuration. |
onBlur | FocusEventHandler<HTMLDivElement> | none | on blur configuration. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | none | Called when the input value changes. |
onSubmit | SubmitEventHandler<HTMLDivElement> | none | Called when the form is submitted. |
onKeyDown | KeyboardEventHandler<HTMLDivElement> | none | on key down configuration. |
onClick | MouseEventHandler<HTMLDivElement> | none | Called when the control is activated. |
onSelect | ReactEventHandler<HTMLDivElement> | none | on select configuration. |
collapsedSize | string | number | none | Panel size when collapsed; defaults to 0%. |
collapsedThreshold | string | number | none | Distance a collapsible panel must be resized past its `minSize` to collapse, or past its `collapsedSize` to expand. Defaults to half the distance between `collapsedSize` and `minSize`. For example if a panel declares `collapsedSize="5%"`, `collapsedThreshold="5%"`, and `minSize="25%"`, it will collapse when resized below 20% and expands when resized above 10%. ℹ️ Interpretation rules: - Numbers are interpreted as pixels (e.g. `minSize={200}` is 200 pixels) - Strings without explicit units are interpreted as percentage (e.g. `minSize="50"` is 50 percent) - Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation |
collapsible | boolean | none | This panel can be collapsed. ℹ️ A collapsible panel will collapse when it's size is less than of the specified `minSize` |
defaultSize | string | number | none | Default size of Panel within its parent group; default is auto-assigned based on the total number of Panels. ℹ️ Interpretation rules: - Numbers are interpreted as pixels (e.g. `defaultSize={200}` is 200 pixels) - Strings without explicit units are interpreted as percentage (e.g. `defaultSize="50"` is 50 percent) - Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation ⚠️ Percentage based sizes may cause slight layout shift when server-rendering. For more information see the documentation. |
disabled | boolean | none | When disabled, a panel cannot be resized either directly or indirectly (by resizing another panel). |
elementRef | Ref<HTMLDivElement | null> | none | Ref attached to the root `HTMLDivElement`. |
groupResizeBehavior | "preserve-relative-size" | "preserve-pixel-size" | none | How should this Panel behave if the parent Group is resized? Defaults to `preserve-relative-size`. - `preserve-relative-size`: Retain the current relative size (as a percentage of the Group) - `preserve-pixel-size`: Retain its current size (in pixels) ℹ️ Panel min/max size constraints may impact this behavior. ⚠️ A Group must contain at least one Panel with `preserve-relative-size` resize behavior. |
maxSize | string | number | none | Maximum size of Panel within its parent group; defaults to `"100%"`. ℹ️ Interpretation rules: - Numbers are interpreted as pixels (e.g. `maxSize={200}` is 200 pixels) - Strings without explicit units are interpreted as percentage (e.g. `maxSize="50"` is 50 percent) - Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation |
minSize | string | number | none | Minimum size of Panel within its parent group; defaults to 0%. ℹ️ Interpretation rules: - Numbers are interpreted as pixels (e.g. `minSize={200}` is 200 pixels) - Strings without explicit units are interpreted as percentage (e.g. `minSize="50"` is 50 percent) - Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation |
onResize | ((panelSize: PanelSize, id: string | number | undefined, prevPanelSize: PanelSize | undefined) => void) | none | Called when panel sizes change. |
panelRef | Ref<PanelImperativeHandle | null> | none | Exposes the following imperative API: - `collapse(): void` - `expand(): void` - `getSize(): number` - `isCollapsed(): boolean` - `resize(size: number): void` ℹ️ The `usePanelRef` and `usePanelCallbackRef` hooks are exported for convenience use in TypeScript projects. |
| Prop | Type | Default | Description |
|---|---|---|---|
defaultChecked | boolean | none | default checked configuration. |
defaultValue | string | number | readonly string[] | none | Initial value for an uncontrolled component. |
autoFocus | boolean | none | auto focus configuration. |
className | string | none | CSS class name. ℹ️ Use the `data-separator` attribute for custom _hover_ and _active_ styles ⚠️ The following properties cannot be overridden: `flex-grow`, `flex-shrink` |
id | string | none | Uniquely identifies the separator within the parent group. Falls back to `useId` when not provided. ℹ️ This value will also be assigned to the `id` and `data-testid` attributes. |
style | CSSProperties | none | CSS properties. ℹ️ Use the `data-separator` attribute for custom _hover_ and _active_ styles ⚠️ The following properties cannot be overridden: `flex-grow`, `flex-shrink` |
aria-invalid | boolean | "false" | "true" | "grammar" | "spelling" | none | Indicates the entered value does not conform to the format expected by the application. |
aria-label | string | none | Defines a string value that labels the current element. |
children | ReactNode | none | Content rendered inside the component. |
onFocus | FocusEventHandler<HTMLDivElement> | none | on focus configuration. |
onBlur | FocusEventHandler<HTMLDivElement> | none | on blur configuration. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | none | Called when the input value changes. |
onSubmit | SubmitEventHandler<HTMLDivElement> | none | Called when the form is submitted. |
onKeyDown | KeyboardEventHandler<HTMLDivElement> | none | on key down configuration. |
onClick | MouseEventHandler<HTMLDivElement> | none | Called when the control is activated. |
onSelect | ReactEventHandler<HTMLDivElement> | none | on select configuration. |
disabled | boolean | none | When disabled, the separator cannot be used to resize its neighboring panels. ℹ️ The panels may still be resized indirectly (while other panels are being resized). To prevent a panel from being resized at all, it needs to also be disabled. |
disableDoubleClick | boolean | none | When true, double-clicking this `Separator` will not reset its `Panel` to its default size. |
elementRef | Ref<HTMLDivElement> | none | Ref attached to the root `HTMLDivElement`. |
preview | ReactNode | none | Overrides the `Group` default preview for this `Separator` when `resizePreviewMode` is "separator". |