Layout

Splitter

Resizable two-pane layout. A keyboard- and pointer-operable separator between two SplitterPanels resizes the first panel in percent.

Import

import { Splitter, SplitterPanel } from "@zephora/react";

Examples

Horizontal

Drag the handle or focus it and use the Arrow keys.

Sidebar

Content

<Splitter defaultSize={40} style={{ height: 160 }}>
  <SplitterPanel>Sidebar</SplitterPanel>
  <SplitterPanel>Content</SplitterPanel>
</Splitter>

Vertical

`orientation="vertical"` stacks the panels.

Editor

Console

<Splitter orientation="vertical" defaultSize={30} style={{ height: 220 }}>
  <SplitterPanel>Editor</SplitterPanel>
  <SplitterPanel>Console</SplitterPanel>
</Splitter>

Controlled

Use `size` + `onSizeChange` to control the split; `minSize`/`maxSize` bound it.

50%

const [size, setSize] = React.useState(50);

<Splitter size={size} onSizeChange={setSize} minSize={20} maxSize={80} style={{ height: 140 }}>
  <SplitterPanel>{Math.round(size)}%</SplitterPanel>
  <SplitterPanel>{Math.round(100 - size)}%</SplitterPanel>
</Splitter>

API

Splitter props

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	"horizontal" places the panels side by side, "vertical" stacks them.
`defaultSize`	`number`	`50`	Uncontrolled initial size of the first panel, in percent.
`size`	`number`	—	Controlled size of the first panel, in percent.
`onSizeChange`	`(size: number) => void`	—	Called with the new first-panel size (percent) on every resize.
`minSize`	`number`	`10`	Lower resize bound, in percent.
`maxSize`	`number`	`90`	Upper resize bound, in percent.
`handleAriaLabel`	`string`	`"Resize panels"`	Accessible name for the drag handle.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.

SplitterPanel props

Prop	Type	Default	Description
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.
`…rest`	`HTMLAttributes<HTMLDivElement>`	—	All native div props are forwarded.

Keyboard

Key	Action
`Arrow keys`	Resize by 2% steps (Left/Right when horizontal, Up/Down when vertical) while the handle is focused.
`Home`	Resize the first panel to minSize.
`End`	Resize the first panel to maxSize.