Resizable

Sidebar

Main

Contract

Overview

Machine-readable contract from Component Spec.

component: resizableexport: Resizableversion: 1attributes: data-refineui=resizable-panel-group

Anatomy

Part	data-refineui
root	resizable-panel-group
resizable_handle	resizable-handle
resizable_panel	resizable-panel

Variants

Axis	Values
orientation	horizontal, vertical

Accessibility

Slot	Element	Role
resizable-handle	div	separator

Keyboard

Key	Action	Native
Home	first-trigger	—
End	last-trigger	—

Layout

Property	Value
direction	logical
rtl	true

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@refineui/react";

<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize={50} minSize={30}>
    Left panel
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50} minSize={30}>
    Right panel
  </ResizablePanel>
</ResizablePanelGroup>

<ResizablePanelGroup orientation="vertical" onLayout={(sizes) => console.log(sizes)}>
  <ResizablePanel size={topPanelSize} onResize={setTopPanelSize}>
    Top
  </ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel>
    Bottom
  </ResizablePanel>
</ResizablePanelGroup>

API Reference

ResizablePanelGroup

Prop	Default	Type	Description
orientation	"horizontal"	"horizontal" | "vertical"	Split direction.
onLayout	—	(sizes: number[]) => void	Fires after resize with panel sizes (percentages summing to ~100).

ResizablePanel

Prop	Default	Type	Description
defaultSize	50	number	Initial size as percentage.
minSize	10	number	Minimum size percentage.
maxSize	100	number	Maximum size percentage.
size	—	number	Controlled size percentage.
onResize	—	(size: number) => void	Event handler when panel resizes.

ResizableHandle

Prop	Default	Type	Description
withHandle	false	boolean	Shows grip affordance on separator.
disabled	false	boolean	Disables resizing.