Resizable

A Resizable component that allows users to resize an element's width by dragging a handle on either the left or right side. The width is persisted to local storage via the name prop.

Key Characteristics

• Drag to resize: Resize by dragging a handle on the left or right side.
• Persisted width: The resized width is saved to local storage using the name prop, so it survives page reloads.
• Configurable bounds: Set minWidth, maxWidth, and initialWidth to constrain the resize range.
• Polymorphic: Render as div, aside, nav, section, or other semantic HTML tags via the as prop.
• Callback: Use the onResize callback to react to width changes in real time.

Import

import { Resizable } from '@andrejground/lab';

Usage

Preview

Drag the right edge to resize

Min: 200px

Max: 400px

Code

import { Resizable } from '@andrejground/lab';

export default function App() {
  return (
    <Resizable
      minWidth={200}
      initialWidth={250}
      maxWidth={400}
      resizableSide="right"
      name="my-resizable"
    >
      <div>Drag the right edge to resize</div>
      <div>Min: <code>200px</code></div>
      <div>Max: <code>400px</code></div>
    </Resizable>
  );
}

Left Side

Set resizableSide="left" to place the drag handle on the left edge.

Preview

Drag the left edge to resize

Min: 200px

Max: 400px

Code

import { Resizable } from '@andrejground/lab';

export default function App() {
  return (
    <Resizable
      minWidth={200}
      initialWidth={250}
      maxWidth={400}
      resizableSide="left"
      name="my-resizable-left"
    >
      <div>Drag the left edge to resize</div>
      <div>Min: <code>200px</code></div>
      <div>Max: <code>400px</code></div>
    </Resizable>
  );
}

onResize Callback

Use the onResize callback to track the current width in real time.

Preview

Resizable side: right

Current: px

Resizable side: left

Current: px

Code

import React from 'react';
import { Resizable } from '@andrejground/lab';

export default function App() {
  const [widthRight, setWidthRight] = React.useState<number>(null);
  const [widthLeft, setWidthLeft] = React.useState<number>(null);

  return (
    <>
      <Resizable
        minWidth={220}
        initialWidth={220}
        maxWidth={350}
        resizableSide="right"
        name="demo-onresize-right"
        onResize={(width) => setWidthRight(Math.round(width))}
      >
        <div>Resizable side: <code>right</code></div>
        <div>Current: <code>{widthRight}px</code></div>
      </Resizable>

      <br />

      <Resizable
        minWidth={220}
        initialWidth={220}
        maxWidth={350}
        resizableSide="left"
        name="demo-onresize-left"
        onResize={(width) => setWidthLeft(Math.round(width))}
      >
        <div>Resizable side: <code>left</code></div>
        <div>Current: <code>{widthLeft}px</code></div>
      </Resizable>
    </>
  );
}