Skip to main content

PaneGroup

A container for panes or nested pane groups.

The PaneGroup component wraps a collection of Panes or nested PaneGroups and is used to initialize and manage the layout of the panes.

API Reference

Props

direction
type: 'horizontal' | 'vertical'
The direction of the panes within the group.
required
autoSaveId
type: string
The id to save the layout of the panes to in local storage.
keyboardResizeBy
type: number
The amount of space to add to the pane group when the keyboard resize event is triggered.
onLayoutChange
type: (layout: number) => void | null
A callback called when the layout of the panes within the group changes.
storage
type: PaneGroupStorage
default: localStorage
ref
type: HTMLElement | null
A reference to the underlying DOM element of the pane group. You can bind to this prop to get a reference to the element.
this
type: PaneGroup
Retrieve a reference to the component to access methods for controlling the pane group.

Data Attributes

The following data attributes are available for the PaneGroup component:

		export type PaneGroupAttributes = {
	/** Applied to every pane group element. */
	"data-pane-group": "";
	/** The direction of the pane group. */
	"data-direction": "horizontal" | "vertical";
	/** The ID of the pane group. */
	"data-pane-group-id": string;
};

Persisted Layouts/Storage

When the PaneGroup component is provided with an autoSaveId prop, it will automatically save the layout of the panes to local storage. If you want to use a different storage mechanism, you can provide a storage prop with a custom storage object that implements the PaneGroupStorage interface.

		export type PaneGroupStorage = {
	/** Retrieves the item from storage */
	getItem(name: string): string | null;
	/** Sets the item to storage */
	setItem(name: string, value: string): void;
};