React Split Pane

React Split Pane is a lightweight, TypeScript-first component for building resizable split-view layouts in React applications. Version 3 is a ground-up rewrite around hooks, replacing the older class-based v0.1.x API with a modern, accessible implementation that supports mouse, touch, and full keyboard interaction.

It renders SplitPane and Pane primitives that handle sizing, constraints, and drag/resize behavior internally, so consumers only declare layout structure and size constraints. The library ships ARIA attributes and keyboard navigation out of the box, supports nested and controlled/uncontrolled layouts, and includes optional persistence and snap-point helpers as separate entry points to keep the core bundle small.

What You Get

• SplitPane and Pane components supporting horizontal and vertical splits, including arbitrarily nested layouts
• Controlled and uncontrolled sizing modes via size/defaultSize props and an onResize callback
• Keyboard-accessible divider with arrow-key resize, Home/End to minimize/maximize, and Escape to reset
• A usePersistence hook (separate /persistence entry point) that saves and restores pane sizes to local or session storage
• Snap points and snap tolerance props for magnetic resize behavior
• Customizable divider component and CSS-variable-driven default stylesheet with built-in dark mode support

Common Use Cases

• IDE-style layouts with a resizable sidebar, editor, and console pane
• Admin dashboards with adjustable content/detail panels
• Documentation or playground UIs with a resizable code editor next to a live preview
• Any responsive app shell where users need to manually control panel proportions

Under The Hood

Architecture - The public surface is small and deliberate: SplitPane (src/components/SplitPane.tsx) reads its Pane children via Children.toArray, memoizes their size/min/max configuration, and delegates pointer/keyboard drag math to two hooks — useResizer (mouse/touch drag with RAF-throttled updates) and useKeyboardResize (arrow/Home/End/Escape handling) — while utils/calculations.ts converts px/percent/Infinity units and distributes sizes across panes. A ResizeObserver on the container drives containerSize, so percentage and pixel sizing recompute on container resize without a manual listener. Persistence and snap-point behavior live in separate modules (persistence.ts, exported via a distinct /persistence subpath) so they don’t bloat the core bundle for consumers who don’t need them.

Tech Stack - Pure TypeScript targeting React 17-19 as peer dependencies (no runtime React version lock-in), built with Rollup into ESM/CJS dual output plus generated .d.ts files via tsc --emitDeclarationOnly. Vitest with @testing-library/react and jsdom back the test suite; ESLint (flat config) and Prettier enforce style; no runtime dependencies beyond React itself, keeping the install footprint minimal.

Code Quality - Seven test files cover the hooks (useResizer.test.ts, useKeyboardResize.test.ts), utilities (calculations.test.ts, classNames.test.ts, accessibility.test.ts), persistence, and the top-level SplitPane.test.tsx component. Modules are small and single-purpose (most under 300 lines), naming is consistent (convertToPixels, distributeSizes), and TypeScript strict types back all public props via src/types/index.ts. The prepublishOnly script runs the full test suite before every publish, indicating a maintained quality bar.

API Design - The SplitPane/Pane composition mirrors familiar layout primitives (similar to CSS flexbox children), needs no wrapping provider, and works uncontrolled by default with an opt-in controlled mode via size/onResize. Migration from the legacy v0.1.x class API is documented in a dedicated MIGRATION.md, and a companion TAILWIND.md covers styling integration, lowering the switching cost for existing users of the older API.