PanelGroup
provides the following imperative API methods:
getId(): string
Panel group idgetLayout(): number[]
Current size of panels (in both percentage and pixel units)setLayout(number[]): void
Resize all panels (using either percentage or pixel units)1 import {
2 ImperativePanelGroupHandle,
3 Panel,
4 PanelGroup,
5 PanelResizeHandle,
6 } from "react-resizable-panels";
7
8 const ref = useRef<ImperativePanelGroupHandle>(null);
9
10 const resetLayout = () => {
11 const panelGroup = ref.current;
12 if (panelGroup) {
13 // Reset each Panel to 50% of the group's width
14 panelGroup.setLayout([50, 50]);
15 }
16 };
17
18 <PanelGroup direction="horizontal" ref={ref}>
19 <Panel>left</Panel>
20 <PanelResizeHandle />
21 <Panel>right</Panel>
22 </PanelGroup>