react-resizable-panels: React components for resizable panel groups/layouts.

Support

If you like this project there are several ways to support it:

• Become a GitHub sponsor
• or buy me a coffee

Installation

Begin by installing the library from NPM:

npm install react-resizable-panels

TypeScript types

TypeScript definitions are included within the published dist folder

FAQs

Frequently asked questions can be found here.

Documentation

Documentation for this project is available at react-resizable-panels.vercel.app.

Group

A Group wraps a set of resizable Panel components. Group content can be resized horizontally or vertically.

Group elements always include the following attributes:

<div data-group data-testid="group-id-prop" id="group-id-prop">

ℹ️ Test id can be used to narrow selection when unit testing.

Required props

None

Optional props

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:

<div data-panel data-testid="panel-id-prop" id="panel-id-prop">

ℹ️ Test id 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

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:

<div data-separator data-testid="separator-id-prop" id="separator-id-prop" role="separator">

ℹ️ Test id can be used to narrow selection when unit testing.

ℹ️ In addition to the attributes shown above, separator also renders all required WAI-ARIA properties.

Required props

None

Optional props

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:

<div data-grid data-testid="grid-id-prop" id="grid-id-prop">

ℹ️ Test id can be used to narrow selection when unit testing.

Required props

Optional props

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:

<div data-cell data-testid="cell-id-prop" id="cell-id-prop">

ℹ️ Test id can be used to narrow selection when unit testing.

⚠️ Cell elements must be direct DOM children of their parent Grid elements.

Required props

Optional props

Gridline

Resizes the columns (or rows) of a Grid.

For example:

// Rendered between columns 0 and 1 and spans all rows
<Gridline type="column" column={1} />

// Rendered between rows 0 and 1 and spans all columns
<Gridline type="row" row={1} />

// Rendered between columns 0 and 1 alongside of row 2 only
<Gridline type="column" column={1} row={2} rowSpan={1} />

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:

<div aria-orientation="vertical" data-separator role="separator">

ℹ️ 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.

⚠️ 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

Optional props