Size limits and resize events
Size limits stop a panel from getting too small or too large, and a resize callback lets the UI react to the current size.
All react-resizable-panels examples react-resizable-panels: usage and stats
How it works
- Set a minimum size. The left panel has
minSize="20%", so dragging stops before it gets smaller than that. [1] - Set a maximum size.
maxSize="60%"stops the same panel from growing past 60% of the group. [1] - Read the size in onResize.
onResizereceives the panel size and the example stores its percentage and pixel values in state to display them. [1]
Run and edit it
It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.
import { useState } from 'react';
import { Group, Panel, Separator } from 'react-resizable-panels';
const pane = (bg) => ({ height: '100%', background: bg, color: '#f1f1f1', display: 'grid',
placeItems: 'center', font: '14px system-ui, sans-serif', borderRadius: 8 });
export default function App() {
const [size, setSize] = useState(null);
return (
<div style={{ width: 560, height: 300, margin: '32px auto', padding: 8, boxSizing: 'border-box', background: '#1b1d23', borderRadius: 12 }}>
<Group style={{ height: '100%' }}>
<Panel id="left" defaultSize="40%" minSize="20%" maxSize="60%" onResize={s => setSize(s)}>
<div style={pane('#264653')}>
<div style={{ textAlign: 'center', lineHeight: 1.6 }}>
<b>min 20% / max 60%</b><br />
{size ? Math.round(size.asPercentage) + '% / ' + Math.round(size.inPixels) + 'px' : '...'}
</div>
</div>
</Panel>
<Separator style={{ width: 8, background: '#2c303a', borderRadius: 4 }} />
<Panel id="right">
<div style={pane('#2a3d66')}>No limits</div>
</Panel>
</Group>
</div>
);
}
Drag the bar: the numbers update, and the panel stops at 20% and 60%. Code written by AgentGid [1].
Drag the bar: the numbers update, and the panel stops at 20% and 60%. Code written by AgentGid [1].Checked Oct 12, 2026: it starts without errors in Chromium with react-resizable-panels 4.14.4, react 19.3.0, react-dom 19.3.0. Needs WebGL.
More react-resizable-panels examples
Horizontal resizable panels with react-resizable-panels Vertical and nested panel groups Collapsible panels in react-resizable-panels Reading and restoring a panel layout
Sources
Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.