# @leafygreen-ui/resizable

> LeafyGreen UI Kit Resizable

Latest version **0.1.4** (published 2026-10-02) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @leafygreen-ui/resizable
pnpm add @leafygreen-ui/resizable
yarn add @leafygreen-ui/resizable
bun add @leafygreen-ui/resizable
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2026-10-02 |
| First published | 2025-08-08 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 138.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 274 |
| Maintainers | thesonofthomp, shaneeza, stephl3, aitchpgm, hnevins, _tsck |

## Links

- npm: https://www.npmjs.com/package/@leafygreen-ui/resizable
- Repository: https://github.com/mongodb/leafygreen-ui
- Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/resizable
- Issues: https://jira.mongodb.org/projects/LG/summary
- npm.io page: https://npm.io/package/@leafygreen-ui/resizable

## Dependencies (3)

- [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.1
- [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.1
- [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.3

## Recent versions

- 0.1.4 (latest) — 2026-10-02
- 0.1.3 — 2025-09-25
- 0.1.2 — 2025-09-10
- 0.1.1 — 2025-08-08

## README

# Resizable

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/resizable.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/resizable/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/resizable
```

### Yarn

```shell
yarn add @leafygreen-ui/resizable
```

### NPM

```shell
npm install @leafygreen-ui/resizable
```

## Overview

`Resizable` is an internal hook that provides resizable functionality to an element. It allows you to specify the position of the resizer and provides props to attach to the resizable element. The hook supports both mouse and keyboard interactions for resizing elements.

## Usage

```tsx
import { useResizable, Position } from '@leafygreen-ui/resizable';

const MyComponent = () => {
  const { getResizerProps, size, resizableRef } = useResizable({
    enabled: true,
    initialSize: 300,
    minSize: 200,
    maxSize: 600,
    position: Position.Right,
    onResize: newSize => {
      console.log('New size:', newSize);
    },
  });

  return (
    <div ref={resizableRef} style={{ width: size, height: '100%' }}>
      {/* Your content here */}
      <div {...getResizerProps()} />
    </div>
  );
};
```

## Props

### `useResizable`

| Prop          | Type                                           | Description                                                            | Default |
| ------------- | ---------------------------------------------- | ---------------------------------------------------------------------- | ------- |
| `enabled`     | `boolean`                                      | Whether the resizable feature is enabled                               | `true`  |
| `initialSize` | `number`                                       | The initial size of the resizable element                              | -       |
| `minSize`     | `number`                                       | The minimum size the resizable element can be resized to               | -       |
| `maxSize`     | `number`                                       | The maximum size the resizable element can be resized to               | -       |
| `onResize`    | `(size: number) => void`                       | Callback function that is called when the resizable element is resized | -       |
| `position`    | `'left'` \| `'right'` \| `'top'` \| `'bottom'` | The position of the resizer handle                                     | -       |

## Return Values

The `useResizable` hook returns an object with the following properties:

| Name              | Type                                           | Description                                                       |
| ----------------- | ---------------------------------------------- | ----------------------------------------------------------------- |
| `size`            | `number`                                       | The current size of the resizable element                         |
| `setSize`         | `React.Dispatch<React.SetStateAction<number>>` | Function to programmatically set the size of the element          |
| `isResizing`      | `boolean`                                      | Indicates whether the element is currently being resized          |
| `getResizerProps` | `() => ResizerProps \| undefined`              | Function that returns props to be spread onto the resizer element |
| `resizableRef`    | `React.RefObject<HTMLElement>`                 | Ref object to be attached to the resizable element                |

## Position

The `Position` enum defines where the resizer handle should be placed:

```tsx
import { Position } from '@leafygreen-ui/resizable';

// Available positions
Position.Left; // Resizable element is on the left
Position.Right; // Resizable element is on the right
Position.Top; // Resizable element is on the top
Position.Bottom; // Resizable element is on the bottom
```

## Examples

### Horizontal Resizing (Left/Right)

```tsx
import { useResizable, Position } from '@leafygreen-ui/resizable';

const HorizontalResizablePanel = () => {
  const { getResizerProps, size, resizableRef } = useResizable({
    initialSize: 300,
    minSize: 200,
    maxSize: 600,
    position: Position.Left,
  });

  return (
    <div ref={resizableRef} style={{ width: size }}>
      <div>Resizable Panel Content</div>
      <div
        {...getResizerProps()}
        style={{
          position: 'absolute',
          right: 0,
          top: 0,
        }}
      />
    </div>
  );
};
```

### Vertical Resizing (Top/Bottom)

```tsx
import { useResizable, Position } from '@leafygreen-ui/resizable';

const VerticalResizablePanel = () => {
  const { getResizerProps, size, resizableRef } = useResizable({
    initialSize: 200,
    minSize: 100,
    maxSize: 500,
    position: Position.Top,
  });

  return (
    <div ref={resizableRef} style={{ height: size }}>
      <div>Resizable Panel Content</div>
      <div
        {...getResizerProps()}
        style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
        }}
      />
    </div>
  );
};
```

## Accessibility

The resizer element receives the appropriate ARIA attributes for keyboard navigation:

- `tabIndex={0}` for keyboard focus
- Arrow keys can be used to resize once focused
- ARIA attributes for screen readers indicating resizable functionality

## Keyboard Support

When the resizer is focused, the following keyboard interactions are supported:

| Key          | Action                                                                            |
| ------------ | --------------------------------------------------------------------------------- |
| `ArrowLeft`  | <br> `Position.Right`: Increase the size <br> `Position.Left`: Decrease the size  |
| `ArrowRight` | <br> `Position.Right`: Decrease the size <br> `Position.Left`: Increases the size |
| `ArrowUp`    | <br> `Position.Top`: Decrease the size <br> `Position.Bottom`: Increases the size |
| `ArrowDown`  | <br> `Position.Top`: Increases the size <br> `Position.Bottom`: Decrease the size |

---
_Source: https://npm.io/package/@leafygreen-ui/resizable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._