Resizable panes
Two adjacent panes with a draggable divider, clamped ratios, and a keyboard-operable separator.
Files
Project workspace
- Overview.tsx
- Preview.tsx
- tokens.css
- notes.md
PreviewAtlas rollout
Keep navigation visible on the left while the working surface stays on the right. Drag the divider or focus it and use the arrow keys.
Drag, use Arrow keys, or double-click the divider to reset.
Implementation
1"use client";2 3import {4 useEffect,5 useId,6 useRef,7 useState,8 type PointerEvent as ReactPointerEvent,9 type KeyboardEvent as ReactKeyboardEvent,10 type ReactNode,11} from "react";12 13export type ResizablePanesProps = {14 left: ReactNode;15 right: ReactNode;16 defaultRatio?: number;17 minRatio?: number;18 maxRatio?: number;19 label?: string;20 className?: string;21 onRatioChange?: (ratio: number) => void;22};23 24function clamp(value: number, min: number, max: number) {25 return Math.max(min, Math.min(max, value));26}27 28/**