(examples)

Sometimes panels need to resize or collapse/expand in response to user actions. For example, double-clicking on a resize bar in VS Code resizes the panel to a size that fits all file names. This type of interaction can be implemented using the imperative API.
Panel provides the following imperative API methods:
collapse(): void: Collapse the panel to its minimum size
expand(minSize?: number): void: Expand the panel to its previous size (or the min size if there is no previous size)
getId(): string: Panel's id
getSize(): number: Panel's current size in (in both percentage and pixel units)
isCollapsed(): boolean: Panel is currently collapsed
isExpanded(): boolean: Panel is currently expanded
resize(size: number): void: Resize the panel to the specified size (either percentage or pixel units)
Resize Left Panel
Resize Middle Panel
Resize Right Panel
left: 20
middle: 60
right: 20
1import {
2 ImperativePanelHandle,
3 Panel,
4 PanelGroup,
5 PanelResizeHandle,
6 } from "react-resizable-panels";
7
8 const ref = useRef<ImperativePanelHandle>(null);
9
10 const collapsePanel = () => {
11 const panel = ref.current;
12 if (panel) {
13 panel.collapse();
14 }
15 };
16
17 <PanelGroup direction="horizontal">
18 <Panel collapsible ref={ref}>
19 <Text>left</Text>
20 </Panel>
21 <ResizeHandle />
22 <Panel>
23 <Text>right</Text>
24 </Panel>
25 </PanelGroup>