Aspyn

Resizable

Draggable split-panel layouts.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@aspyn-io/kit";

Map + sidebar split

The dispatch layout: drag the handle to resize. Keyboard accessible (arrows).

Map
Routes
<ResizablePanelGroup direction="horizontal" className="rounded-lg border">
  <ResizablePanel defaultSize={70} minSize={40}>Map</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={30} minSize={20}>Routes</ResizablePanel>
</ResizablePanelGroup>

Nested vertical split

Canvas
Timeline
<ResizablePanelGroup direction="vertical">
  <ResizablePanel>Canvas</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Timeline</ResizablePanel>
</ResizablePanelGroup>

Notes

  • Persist layouts with the autoSaveId prop (localStorage).