https://github.com/bvaughn/react-resizable-panels
https://github.com/bvaughn/react-resizable-panels
group layout panel react resizable
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bvaughn/react-resizable-panels
- Owner: bvaughn
- License: mit
- Created: 2022-12-22T19:06:17.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-05-03T20:18:13.000Z (about 1 year ago)
- Last Synced: 2025-05-06T15:03:49.726Z (about 1 year ago)
- Topics: group, layout, panel, react, resizable
- Language: TypeScript
- Homepage: https://react-resizable-panels.vercel.app/
- Size: 1.01 MB
- Stars: 4,431
- Watchers: 7
- Forks: 170
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - bvaughn/react-resizable-panels - (TypeScript)
- my-awesome-list - react-resizable-panels
README
`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](https://github.com/sponsors/bvaughn/)
- or [buy me a coffee](http://givebrian.coffee/)
## Installation
Begin by installing the library from NPM:
```sh
npm install react-resizable-panels
```
## TypeScript types
TypeScript definitions are included within the published `dist` folder
## FAQs
Frequently asked questions can be found [here](https://react-resizable-panels.vercel.app/common-questions).
## Documentation
Documentation for this project is available at [react-resizable-panels.vercel.app](https://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:
```html
```
ℹ️ [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 data-group attribute.
style
CSS properties.
⚠️ The following styles cannot be overridden: display, flex-direction, flex-wrap, and 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.
⚠️ Refer to the documentation for how to avoid layout shift when using server components.
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.
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 data-panel attribute.
style
CSS properties.
⚠️ Style is applied to nested HTMLDivElement to avoid styles that interfere with Flex layout.
collapsedSize
Panel size when collapsed; defaults to 0%.
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.
elementRef
Ref attached to the root HTMLDivElement.
maxSize
Maximum size of Panel within its parent group; defaults to 100%.
minSize
Minimum size of Panel within its parent group; defaults to 0%.
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 data-separator attribute.
style
CSS properties.
ℹ️ Use the data-separator attribute for custom hover and active styles
⚠️ The following properties cannot be overridden: flex-grow, flex-shrink
elementRef
Ref attached to the root HTMLDivElement.