@glyx-dev/split-pane

Two-pane resizable layout. Drag the divider to resize either pane.

Install

npm install @glyx-dev/split-pane

Usage

import { SplitPane } from '@glyx-dev/split-pane'
 
<SplitPane direction="horizontal" defaultSizes={[30, 70]} minSizes={[120, 200]} width={W} height={H}>
  <Sidebar />
  <Editor />
</SplitPane>

direction is "horizontal" (side-by-side) or "vertical" (stacked).

Props

Prop	Type	Default	Description
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout axis
`defaultSizes`	`[number, number]`	`[40, 60]`	Initial split, as percentages summing to 100
`minSizes`	`[number, number]`	`[80, 80]`	Minimum pixel width/height for each pane
`dividerSize`	`number`	`8`	Divider thickness in pixels — also its click/drag hit target width
`dividerColor`	`string`	`'#2A2A3A'`	Divider color at rest
`dividerHoverColor`	`string`	`'#3A3A4E'`	Divider color while the pointer hovers it — the "this is draggable" cue
`dividerActiveColor`	`string`	`'#00A878'`	Divider color while actively dragging

The divider's hit target is only as wide as dividerSize. If pane content is dense or the default 8px feels hard to grab, raise dividerSize — there's no separate padding that widens the hit target beyond the visible divider.

@glyx-dev/drag-drop @glyx-dev/context-menu