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(): voidCollapse the panel to its minimum sizeexpand(minSize?: number): voidExpand the panel to its previous size (or the min size if there is no previous size)getId(): stringPanel idgetSize(): numberPanel's current size in (in both percentage and pixel units)isCollapsed(): booleanPanel is currently collapsedisExpanded(): booleanPanel is currently expandedresize(size: number): voidResize the panel to the specified size (either percentage or pixel units)1 import {
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 left
20 </Panel>
21 <PanelResizeHandle />
22 <Panel>
23 right
24 </Panel>
25 </PanelGroup>