hub / github.com/bvaughn/react-resizable-panels

github.com/bvaughn/react-resizable-panels @4.12.1 sqlite

repository ↗ · DeepWiki ↗ · release 4.12.1 ↗

292 symbols 1,017 edges 283 files 0 documented · 0%

README

react-resizable-panels logo

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

Support

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

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:

ℹ️ Test id 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. ⚠️ 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.)
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:

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

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. ⚠️ 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%.
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:

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

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`
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`.

Extension points exported contracts — how you extend this code

Matchers (Interface)

(no doc)

vitest.d.ts

PanelImperativeHandle (Interface)

(no doc)

lib/components/panel/types.ts

EncodedClickableElement (Interface)

(no doc)

integrations/tests/src/utils/serializer/types.ts

GroupImperativeHandle (Interface)

(no doc)

lib/components/group/types.ts

EncodedContainerElement (Interface)

(no doc)

integrations/tests/src/utils/serializer/types.ts

EncodedDisplayModeToggleElement (Interface)

(no doc)

integrations/tests/src/utils/serializer/types.ts

EncodedGroupElement (Interface)

(no doc)

integrations/tests/src/utils/serializer/types.ts

EncodedIFrameElement (Interface)

(no doc)

integrations/tests/src/utils/serializer/types.ts

Core symbols most depended-on inside this repo

assertLayoutChangeCounts

called by 94

integrations/tests/src/utils/assertLayoutChangeCounts.ts

goToUrl

called by 61

integrations/tests/src/utils/goToUrl.ts

lib/global/test/mockGroup.ts

sizeStyleToPixels

called by 29

lib/global/styles/sizeStyleToPixels.ts

useDefaultLayout

called by 26

lib/components/group/useDefaultLayout.ts

getCursorStyle

called by 23

lib/global/cursor/getCursorStyle.ts

resizeHelper

called by 23

integrations/tests/src/utils/pointer-interactions/resizeHelper.ts

Shape

Function 267

Interface 12

Method 9

Class 4

Languages

TypeScript100%

Modules by API surface

lib/utils/test/mockResizeObserver.ts11 symbols

integrations/tests/src/utils/serializer/encode.ts11 symbols

integrations/tests/src/utils/serializer/decode.ts11 symbols

integrations/tests/src/utils/serializer/types.ts9 symbols

lib/global/utils/getImperativePanelMethods.ts7 symbols

lib/utils/test/mockBoundingClientRect.ts6 symbols

lib/utils/EventEmitter.ts6 symbols

lib/global/mutable-state/groups.ts6 symbols

lib/utils/test/mockGetComputedStyle.ts5 symbols

lib/global/test/mockGroup.ts5 symbols

lib/global/utils/getImperativeGroupMethods.ts4 symbols

lib/global/mutable-state/interactions.ts4 symbols

Dependencies from manifests, versioned

@csstools/postcss-oklab-function4.0.11 · 1×

@eslint/js9.30.1 · 1×

@headlessui/react2.2.4 · 1×

@headlessui/tailwindcss0.2.2 · 1×

@heroicons/react2.2.0 · 1×

@playwright/test1 · 1×

@tailwindcss/postcss4 · 1×

@tailwindcss/vite4.1.11 · 1×

@tailwindplus/elements1.0.5 · 1×

@testing-library/jest-dom6.6.4 · 1×

@testing-library/react16.3.0 · 1×

@testing-library/user-event14.6.1 · 1×

For agents

$ claude mcp add react-resizable-panels \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact