SplitView

SplitView lays out resizable panes along one axis. Place a SplitViewResizer between two SplitViewPanes to make that boundary draggable. Nest a SplitView inside a pane for two-dimensional (columns and rows) layouts.

The group must have a height for the panes to fill — set one on the SplitView (or a parent).

Importing

import { SplitView, SplitViewPane, SplitViewResizer } from '@customerio/pluma-components/react';

Basic usage

A two-pane split with a draggable boundary. defaultSizes seeds the flexible panes' percentages; drag the handle to resize.

Orientation

orientation="vertical" splits into stacked, resizable rows.

Two-dimensional layouts

Nest a vertical SplitView inside a pane of a horizontal one to get resizable columns and rows.

Flexible and fixed panes

A pane's size is interpreted by unit: a percentage ('30', '30%') is a flexible pane that shares leftover space, while a pixel length (120, '120px', '12rem') is a fixed track that keeps its width as the container resizes. Set isResizable={false} on a fixed pane and omit the resizer beside it to keep it static.

Minimum and maximum sizes

Constrain how far a pane can be resized with minSize / maxSize (pixels or percentages).

Hiding panes

Set isHidden to collapse a pane to zero and let the remaining panes take its space; the pane stays mounted and restores its size when shown again. Deciding when to hide (and rendering any toggle affordance) is up to you.

Snapping

snaps are percentages the boundary is pinned to. When set, dragging a resizer moves discretely between these points (snapping to the nearest one) instead of resizing smoothly — useful for offering a few preset splits.

Persisting sizes

SplitView is uncontrolled by default. To persist a user's layout, read the sizes from onResizeEnd (fired once a drag or keyboard change is committed) and store them, then pass them back as defaultSizes. For full control, pass sizes and update it from onSizesChange.

useStoredSplitView

The useStoredSplitView hook wires that persistence up for you. Give it an id and spread the result onto the SplitView — the layout is saved to localStorage on resize and restored on the next load. Resize the example below and reload the page: it comes back the way you left it.

Custom storage — by default the hook uses localStorage (falling back to a no-op when it's unavailable, e.g. during server rendering). Pass a storage object ({ getItem, setItem }) to persist somewhere else — cookies for SSR, or an in-memory stub for tests.

Conditional panels

When panels are shown and hidden, give each SplitViewPane a stable id and pass the currently visible ids as panelIds. Each configuration then remembers its own layout, and the split re-applies the stored layout for whichever configuration is active — no remounting required. Resize a boundary, toggle the preview off and on, and the layout comes back.

Accessibility

Each SplitViewResizer is a role="separator" with aria-orientation and aria-valuenow/aria-valuemin/aria-valuemax. It is keyboard-operable: focus the handle and use the arrow keys to resize (hold Shift for a coarser step), following the WAI-ARIA window splitter pattern. When snaps is set, the arrow keys move between the snap points instead (Shift / Home / End jump to the ends).