``` ℹ️ [Test id](https://testing-library.com/docs/queries/bytestid/) can be used to narrow selection when unit testing. #### Required props None #### Optional props

Name	Description
className	CSS class name.
id	Uniquely identifies this group within an application. Falls back to `useId` when not provided. ℹ️ This value will also be assigned to the `id` and `data-testid` attributes.
style	CSS properties. ⚠️ The default inline styles cannot be overridden, except for `overflow`.
children	Panel and Separator components that comprise this group.
defaultLayout	Default layout for the Group. ℹ️ This value allows layouts to be remembered between page reloads. ⚠️ Slight layout shift may occur when server-rendering panels with percentage-based default sizes. Refer to the documentation for suggestions on how to minimize the impact of this.
disableCursor	This library sets custom mouse cursor styles to indicate drag state. Use this prop to disable that behavior for Panels and Separators in this group.
disabled	Disable resize functionality.
elementRef	Ref attached to the root `HTMLDivElement`.
groupRef	Exposes the following imperative API: `getLayout(): Layout` `setLayout(layout: Layout): void` ℹ️ The `useGroupRef` and `useGroupCallbackRef` hooks are exported for convenience use in TypeScript projects.
onLayoutChange	Called when the Group's layout is changing. ⚠️ For layout changes caused by pointer events, this method is called each time the pointer is moved. For most cases, it is recommended to use the `onLayoutChanged` callback instead.
onLayoutChanged	Called after the Group's layout has been changed. ℹ️ For layout changes caused by pointer events, this method is not called until the pointer has been released. This method is recommended when saving layouts to some storage api. ℹ️ The second argument contains meta information about the layout change. The `isUserInteraction` attribute signals whether the resize was caused by direct user input. It is true for resizes caused by pointer or keyboard input and false for other triggers (e.g. imperative API calls, initial mount, etc.) The `requestedLayout` attribute is the layout before constraints were applied for the current Group size; prefer it when persisting layouts.
resizePreviewMode	Controls whether pointer dragging updates `Panel`s sizes immediately, or renders overlay separator previews until the pointer is released. Defaults to `"panel"` (immediate resizing); `"separator"` defers resizing until release. Customize previews using the `SeparatorOverlay` component.
resizeTargetMinimumSize	Minimum size of the resizable hit target area (either `Separator` or `Panel` edge) This threshold ensures are large enough to avoid mis-clicks. Coarse inputs (typically a finger on a touchscreen) have reduced accuracy; to ensure accessibility and ease of use, hit targets should be larger to prevent mis-clicks. Fine inputs (typically a mouse) can be smaller ℹ️ Apple interface guidelines suggest `20pt` (`27px`) on desktops and `28pt` (`37px`) for touch devices In practice this seems to be much larger than many of their own applications use though.
orientation	Specifies the resizable orientation ("horizontal" or "vertical"); defaults to "horizontal"

### Panel A Panel wraps resizable content and can be configured with min/max size constraints and collapsible behavior. Panel size props can be in the following formats: - Percentage of the parent Group (0..100) - Pixels - Relative font units (em, rem) - Viewport relative units (vh, vw) ℹ️ Numeric values are assumed to be pixels. Strings without explicit units are assumed to be percentages (0%..100%). Percentages may also be specified as strings ending with "%" (e.g. "33%") Pixels may also be specified as strings ending with the unit "px". Other units should be specified as strings ending with their CSS property units (e.g. 1rem, 50vh) Panel elements always include the following attributes: ```html

``` ℹ️ [Test id](https://testing-library.com/docs/queries/bytestid/) can be used to narrow selection when unit testing. ⚠️ Panel elements must be direct DOM children of their parent Group elements. #### Required props None #### Optional props

Name	Description
className	CSS class name. ⚠️ Class is applied to nested `HTMLDivElement` to avoid styles that interfere with Flex layout.
id	Uniquely identifies this panel within the parent group. Falls back to `useId` when not provided. ℹ️ This prop is used to associate persisted group layouts with the original panel. ℹ️ This value will also be assigned to the `id` and `data-testid` attributes.
style	CSS properties. ⚠️ The default inline styles cannot be overridden, except for `overflow`.
collapsedSize	Panel size when collapsed; defaults to 0%.
collapsedThreshold	Distance a collapsible panel must be resized past its `minSize` to collapse, or past its `collapsedSize` to expand. Defaults to half the distance between `collapsedSize` and `minSize`. For example if a panel declares `collapsedSize="5%"`, `collapsedThreshold="5%"`, and `minSize="25%"`, it will collapse when resized below 20% and expands when resized above 10%. ℹ️ Interpretation rules: Numbers are interpreted as pixels (e.g. `minSize={200}` is 200 pixels) Strings without explicit units are interpreted as percentage (e.g. `minSize="50"` is 50 percent) Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation
collapsible	This panel can be collapsed. ℹ️ A collapsible panel will collapse when it's size is less than of the specified `minSize`
defaultSize	Default size of Panel within its parent group; default is auto-assigned based on the total number of Panels. ℹ️ Interpretation rules: Numbers are interpreted as pixels (e.g. `defaultSize={200}` is 200 pixels) Strings without explicit units are interpreted as percentage (e.g. `defaultSize="50"` is 50 percent) Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation ⚠️ Percentage based sizes may cause slight layout shift when server-rendering. For more information see the documentation.
disabled	When disabled, a panel cannot be resized either directly or indirectly (by resizing another panel).
elementRef	Ref attached to the root `HTMLDivElement`.
groupResizeBehavior	How should this Panel behave if the parent Group is resized? Defaults to `preserve-relative-size`. `preserve-relative-size`: Retain the current relative size (as a percentage of the Group) `preserve-pixel-size`: Retain its current size (in pixels) ℹ️ Panel min/max size constraints may impact this behavior. ⚠️ A Group must contain at least one Panel with `preserve-relative-size` resize behavior.
maxSize	Maximum size of Panel within its parent group; defaults to `"100%"`. ℹ️ Interpretation rules: Numbers are interpreted as pixels (e.g. `maxSize={200}` is 200 pixels) Strings without explicit units are interpreted as percentage (e.g. `maxSize="50"` is 50 percent) Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation
minSize	Minimum size of Panel within its parent group; defaults to 0%. ℹ️ Interpretation rules: Numbers are interpreted as pixels (e.g. `minSize={200}` is 200 pixels) Strings without explicit units are interpreted as percentage (e.g. `minSize="50"` is 50 percent) Use explicit units (e.g. "px", "%", "em", "rem", "vh", or "vw") to change interpretation
onResize	Called when panel sizes change. @param panelSize Panel size (both as a percentage of the parent Group and in pixels) @param id Panel id (if one was provided as a prop) @param prevPanelSize Previous panel size (will be undefined on mount)
panelRef	Exposes the following imperative API: `collapse(): void` `expand(): void` `getSize(): number` `isCollapsed(): boolean` `resize(size: number): void` ℹ️ The `usePanelRef` and `usePanelCallbackRef` hooks are exported for convenience use in TypeScript projects.

### Separator Separators are not _required_ but they are _recommended_ as they improve keyboard accessibility. ⚠️ Separator elements must be direct DOM children of their parent Group elements. Separator elements always include the following attributes: ```html

``` ℹ️ [Test id](https://testing-library.com/docs/queries/bytestid/) can be used to narrow selection when unit testing. ℹ️ In addition to the attributes shown above, separator also renders all required [WAI-ARIA properties](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/separator_role#associated_wai-aria_roles_states_and_properties). #### Required props None #### Optional props

Name	Description
className	CSS class name. ℹ️ Use the `data-separator` attribute for custom hover and active styles ⚠️ The following properties cannot be overridden: `flex-grow`, `flex-shrink`
id	Uniquely identifies the separator within the parent group. Falls back to `useId` when not provided. ℹ️ This value will also be assigned to the `id` and `data-testid` attributes.
style	CSS properties. ℹ️ Use the `data-separator` attribute for custom hover and active styles ⚠️ The following properties cannot be overridden: `flex-grow`, `flex-shrink`
disabled	When disabled, the separator cannot be used to resize its neighboring panels. ℹ️ The panels may still be resized indirectly (while other panels are being resized). To prevent a panel from being resized at all, it needs to also be disabled.
disableDoubleClick	When true, double-clicking this `Separator` will not reset its `Panel` to its default size.
elementRef	Ref attached to the root `HTMLDivElement`.
preview	Overrides the `Group` default preview for this `Separator` when `resizePreviewMode` is "separator".

### Grid A Grid arranges resizable Cells in two dimensions. Columns can be resized horizontally and rows can be resized vertically; dragging the point where a column boundary and a row boundary intersect resizes both. Size constraints (e.g. min/max size, collapsible) are specified per track (column or row), using the same format as Panel props. Cells can span multiple columns and/or rows. Track boundaries cannot be resized alongside of a cell that spans across them. Grid elements always include the following attributes: ```html

``` ℹ️ [Test id](https://testing-library.com/docs/queries/bytestid/) can be used to narrow selection when unit testing. #### Required props

Name	Description
columns	Grid columns; either the number of columns or an array of size constraints (one per column).
rows	Grid rows; either the number of rows or an array of size constraints (one per row).

#### Optional props

Name	Description
className	CSS class name.
id	Uniquely identifies this grid within an application. Falls back to `useId` when not provided. ℹ️ This value will also be assigned to the `id` and `data-testid` attributes.
style	CSS properties. ⚠️ Grid template and display properties are managed by the Grid and cannot be overridden.
children	Cell and Gridline components that comprise this grid. ⚠️ Cell and Gridline elements must be direct DOM children of their parent Grid element.
defaultLayout	Default layout for either or both of the Grid's axes. ℹ️ This value allows layouts to be remembered between page reloads.
disableCursor	This library sets custom mouse cursor styles to indicate drag state. Use this prop to disable that behavior for this grid.
disabled	Disable resize functionality.
elementRef	Ref attached to the root `HTMLDivElement`.
gridRef	Exposes the following imperative API: `getLayout(): GridLayout` `getTrackById(axis: "column" \| "row", id: string \| number): GridTrackImperativeHandle` `getTrackByIndex(axis: "column" \| "row", index: number): GridTrackImperativeHandle` `setLayout(layout: Partial<GridLayout>): GridLayout` ℹ️ The `useGridRef` and `useGridCallbackRef` hooks are exported for convenience use in TypeScript projects.
onLayoutChange	Called when the Grid's layout is changing. ⚠️ For layout changes caused by pointer events, this method is called each time the pointer is moved. For most cases, it is recommended to use the `onLayoutChanged` callback instead.
onLayoutChanged	Called after the Grid's layout has been changed. ℹ️ For layout changes caused by pointer events, this method is not called until the pointer has been released. This method is recommended when saving layouts to some storage api.
resizeTargetMinimumSize	Minimum size of the resizable hit target area (either a `Gridline` or a `Cell` edge) This threshold ensures targets are large enough to avoid mis-clicks. ℹ️ Refer to the `Group` prop of the same name for more information.

### Cell A Cell occupies one or more tracks (columns and rows) within a Grid. Cells are resized along with the tracks they occupy. Cell elements always include the following attributes: ```html

``` ℹ️ [Test id](https://testing-library.com/docs/queries/bytestid/) can be used to narrow selection when unit testing. ⚠️ Cell elements must be direct DOM children of their parent Grid elements. #### Required props

Name	Description
column	Index of the (first) column this cell occupies.
row	Index of the (first) row this cell occupies.

#### Optional props

Name	Description
className	CSS class name.
id	Uniquely identifies this cell within the parent grid. Falls back to `useId` when not provided. ℹ️ This value will also be assigned to the `id` and `data-testid` attributes.
style	CSS properties. ⚠️ Grid placement properties are managed by the Cell and cannot be overridden.
children	Cell contents.
columnSpan	Number of columns this cell spans; defaults to 1.
elementRef	Ref attached to the root `HTMLDivElement`.
rowSpan	Number of rows this cell spans; defaults to 1.

### Gridline Resizes the columns (or rows) of a Grid. For example: ```tsx // Rendered between columns 0 and 1 and spans all rows ``` ```tsx // Rendered between rows 0 and 1 and spans all columns ``` ```tsx // Rendered between columns 0 and 1 alongside of row 2 only ``` A gridline should not be rendered alongside of a Cell that spans across its boundary (this includes disabled gridlines; an error will be logged to the console); render multiple gridlines along the same boundary instead (e.g. before and after the spanning Cell). ℹ️ Once a boundary contains a gridline, it can only be resized using gridlines; the parts of the boundary that aren't alongside of a gridline can't be dragged. Where column and row gridlines intersect, dragging resizes both axes. Gridlines are not _required_ but they are _recommended_ as they improve keyboard accessibility. Gridline elements always include the following attributes: ```html

``` ℹ️ Column gridlines are vertical (`aria-orientation="vertical"`) and row gridlines are horizontal (`aria-orientation="horizontal"`). ℹ️ In addition to the attributes shown above, gridlines also render all required [WAI-ARIA properties](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/separator_role#associated_wai-aria_roles_states_and_properties). ⚠️ Gridline elements must be direct DOM children of their parent Grid elements. ℹ️ Gridlines rendered by another component (rather than directly within the Grid) aren't detected until they mount, so server-rendered layouts may shift slightly during hydration. #### Required props

Name	Description
type	Column gridlines are vertical; they resize the columns on either side of them. Row gridlines are horizontal; they resize the rows on either side of them.

#### Optional props

Name	Description
children	Gridline contents (e.g. a drag handle icon).
className	CSS class name. ℹ️ Use the `data-separator` attribute for custom hover and active styles
disabled	When disabled, the gridline cannot be used to resize its neighboring tracks. ℹ️ The tracks may still be resized indirectly (e.g. by an intersecting gridline or another boundary). To prevent a track from being resized at all, it needs to also be disabled.
elementRef	Ref attached to the root `HTMLDivElement`.
style	CSS properties. ⚠️ Grid placement properties are managed by the gridline and cannot be overridden.
column	When `type` is "column", the gridline is rendered along the leading (left) edge of this column (between it and the previous column); must be greater than 0 and less than the number of columns. When `type` is "row", index of the first column the gridline is rendered alongside of; defaults to 0.
row	When `type` is "column", index of the first row the gridline is rendered alongside of; defaults to 0. When `type` is "row", the gridline is rendered along the leading (top) edge of this row (between it and the previous row); must be greater than 0 and less than the number of rows.
rowSpan	Number of rows a column gridline spans; defaults to all rows (starting from `row`). ℹ️ Gridlines can span a subset of rows in order to avoid cells that span across the boundary they sit on; multiple gridlines can be rendered along the same boundary (e.g. above and below a spanning cell).
columnSpan	Number of columns a row gridline spans; defaults to all columns (starting from `column`). ℹ️ Gridlines can span a subset of columns in order to avoid cells that span across the boundary they sit on; multiple gridlines can be rendered along the same boundary (e.g. before and after a spanning cell).

--- _Source: https://npm.io/package/react-resizable-panels · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._