<Splitter/>

A resizable handle you drop between two sibling elements inside a flex container. Dragging the handle resizes one of the siblings — width for a vertical splitter, height for a horizontal one. Optionally persists its size in localStorage.

Attributes

name	type	description
orientation?	'vertical' | 'horizontal'	Defaults to 'vertical'. A vertical handle is dragged horizontally to resize width; a horizontal one the opposite. Also writes to aria-orientation.
target?	'prev' | 'next'	Which sibling to resize. Defaults to 'prev'; with 'next' the handle grows the next sibling instead.
min?	number	Minimum size in pixels. Defaults to 0.
max?	number	Maximum size in pixels. Defaults to Infinity.
initial?	number	Initial size in pixels, overriding what CSS would produce. Overridden in turn by a stored value when persist is set.
persist?	string	localStorage key. Reads on mount, writes on drag end. Omit to keep the splitter session-only.
class?	string	Extra class applied to the handle, on top of the component's own auto-generated class.

Examples

Vertical splitter

Default orientation. The handle resizes the previous sibling's width — useful for sidebar / content layouts.

import { render } from 'pota'
import { Splitter } from 'pota/components'

function App() {
	return (
		<div
			style={{
				display: 'flex',
				height: '200px',
				border: '1px solid #aaa',
			}}
		>
			<aside
				style={{
					width: '200px',
					padding: '1rem',
					background: '#2a9d8f',
					color: 'white',
				}}
			>
				sidebar (drag the handle →)
			</aside>
			<Splitter
				min={100}
				max={400}
				initial={200}
			/>
			<main
				style={{
					flex: 1,
					padding: '1rem',
					background: '#264653',
					color: 'white',
				}}
			>
				content
			</main>
		</div>
	)
}

render(App)

Horizontal splitter with persistence

Pass orientation="horizontal" for a handle that resizes height. With persist, the size is restored from localStorage the next time the page loads.

import { render } from 'pota'
import { Splitter } from 'pota/components'

function App() {
	return (
		<div
			style={{
				display: 'flex',
				'flex-direction': 'column',
				height: '300px',
				border: '1px solid #aaa',
			}}
		>
			<section
				style={{
					padding: '1rem',
					background: '#e76f51',
					color: 'white',
				}}
			>
				top (drag the handle ↓ — refresh the page to see persistence)
			</section>
			<Splitter
				orientation="horizontal"
				min={50}
				max={250}
				initial={120}
				persist="docs:splitter-demo"
			/>
			<section
				style={{
					flex: 1,
					padding: '1rem',
					background: '#f4a261',
				}}
			>
				bottom
			</section>
		</div>
	)
}

render(App)

No JSX (compiler-less)

Splitter is built with Component calls rather than JSX, so it works in compiler-less setups alongside the xml tagged-template API — same shape, no Babel preset required.

import { Component, render } from 'pota'
import { Splitter } from 'pota/components'

const App = () =>
	Component('div', {
		style: 'display: flex; height: 200px',
		children: [
			Component('aside', {
				style: 'width: 200px; background: #2a9d8f',
			}),
			Component(Splitter, { min: 100, max: 400 }),
			Component('main', { style: 'flex: 1; background: #264653' }),
		],
	})

render(App)