Editors and workspaces

useResizable

Provides pane sizing props and separator handle props for horizontal or vertical resizable groups.

Live component preview · Astro

Explore Resizable

Try the component this hook connects to. The preview uses the Astro adapter; the React example below uses useResizable.

Editor

Drag a separator or focus it and use Arrow Left / Arrow Right.

Preview

Double-click a separator to reset pane sizes.

React usage

Import from @santi020k/lumen-react and spread the controller props onto the matching components.

import { Resizable } from '@santi020k/lumen-react'

export function SplitEditor() {
  return (
    <Resizable defaultSizes={[30, 70]}>
      <aside>Navigation</aside>
      <main>Editor</main>
    </Resizable>
  )
}

import { Resizable } from '@santi020k/lumen-react'

export function SplitEditor() {
  return (
    <Resizable defaultSizes={[30, 70]}>
      <aside>Navigation</aside>
      <main>Editor</main>
    </Resizable>
  )
}

Load @santi020k/lumen-react/styles.css once in your application. With React Server Components, put 'use client' at the top of the module that calls the hook. Follow the React setup guide for the framework boundary.

Options

Property	Type	Default	Description
panelCount	number	2	Number of panes in the group.
defaultSizes	number[]	equal panes	Initial pane sizes normalized to 100%.
minSize	number \| number[]	12	Minimum pane size percentage.
maxSize	number \| number[]	88	Maximum pane size percentage.
direction	"horizontal" \| "vertical"	"horizontal"	Resize axis and generated separator orientation.
resetOnDoubleClick	boolean	true	Reset panes to their default sizes on handle double-click.
onSizesChange	(sizes: number[]) => void	-	Callback fired when panes are resized.

Controller return values

Property	Type	Description
rootProps	LumenProps<"div">	Spread onto the resizable root.
getPanelProps	(index, props?) => LumenProps<"div">	Returns data/style props for a pane.
getHandleProps	(index, props?) => LumenProps<"button">	Returns separator handle props with pointer and keyboard handlers.
sizes	number[]	Current pane sizes as percentages.
resizePair	(index, nextSize) => void	Resize one pane and its following pane while honoring min/max.
reset	() => void	Reset to the normalized default sizes.