Resizable

View on MongoDB.design

Installation

PNPM

pnpm add @leafygreen-ui/resizable

Yarn

yarn add @leafygreen-ui/resizable

NPM

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

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:

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)

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)

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 | Position.Right: Increase the size Position.Left: Decrease the size | | ArrowRight | Position.Right: Decrease the size Position.Left: Increases the size | | ArrowUp | Position.Top: Decrease the size Position.Bottom: Increases the size | | ArrowDown | Position.Top: Increases the size Position.Bottom: Decrease the size |