react-window-splitter

Examples
API Docs
Thanks

PanelGroup

A group of panels that has constraints and a user can resize

NameTypeDescription
handleRef<PanelGroupHandle> | undefined;

Imperative handle to control the group

snapshotGroupMachineSnapshot | undefined;

Persisted state to initialized the machine with

autosaveIdstring | undefined;

An id to use for autosaving the layout

orientationOrientation | undefined;

The orientation of the grid

autosaveStrategy"localStorage" | "cookie" | undefined;

How to save the persisted state

Imperative API

NameTypeDescription
getId() => string;

The id of the group

getPixelSizes() => number[]

Get the sizes of all the items in the layout as pixels

getPercentageSizes() => number[]

Get the sizes of all the items in the layout as percentages of the group size

setSizes(items: import("/vercel/path0/packages/state/dist/commonjs/index").Unit[]) => void

Set the size of all the items in the layout. This just calls setSize on each item. It is up to you to make sure the sizes make sense.

NOTE: Setting handle sizes will do nothing.

getTemplate() => string;

Get the template for the group in pixels. Useful for testing

getState() => "idle" | "dragging";