### Run Development Server

Source: https://github.com/react-grid-layout/react-resizable/blob/master/CLAUDE.md

Starts a development server to view and interact with examples.

```bash
yarn dev
```

--------------------------------

### Build Examples for Production

Source: https://github.com/react-grid-layout/react-resizable/blob/master/CLAUDE.md

Compiles the example applications for production deployment.

```bash
yarn build-example
```

--------------------------------

### Complete Resizable Configuration Example

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/configuration.md

A comprehensive example showcasing most configuration options for the Resizable component, including constraints, aspect ratio locking, grid snapping, and event handlers.

```jsx
<Resizable
  width={300}
  height={300}
  minConstraints={[150, 150]}
  maxConstraints={[600, 600]}
  lockAspectRatio={true}
  axis="both"
  handleSize={[25, 25]}
  resizeHandles={['se', 'sw', 'ne', 'nw']}
  draggableOpts={{ grid: [10, 10], disabled: false }}
  transformScale={1}
  className="resizable-container"
  onResizeStart={(e, { size, handle }) => console.log('Start:', handle, size)}
  onResize={(e, { size, handle }) => console.log('Resize:', handle, size)}
  onResizeStop={(e, { size, handle }) => console.log('Stop:', handle, size)}>
  <div style={{ width: width + 'px', height: height + 'px' }}>
    Fully configured resizable element
  </div>
</Resizable>
```

--------------------------------

### Install React-Resizable

Source: https://github.com/react-grid-layout/react-resizable/blob/master/README.md

Use npm to install the react-resizable package. This is the first step to using the library in your project.

```bash
npm install --save react-resizable
```

--------------------------------

### Install Dependencies with Yarn

Source: https://github.com/react-grid-layout/react-resizable/blob/master/CLAUDE.md

Installs all necessary project dependencies using Yarn.

```bash
yarn
```

--------------------------------

### Multiple Handles and Constraints Example

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable.md

Shows how to configure the Resizable component with all eight resize handles and set specific minimum and maximum constraints for both width and height.

```jsx
<Resizable
  width={300}
  height={300}
  minConstraints={[150, 150]}
  maxConstraints={[600, 600]}
  resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}
  onResize={(e, { size }) => setDimensions(size)}
>
  <div style={{ width: width + 'px', height: height + 'px' }}>
    Content with 8 resize handles
  </div>
</Resizable>
```

--------------------------------

### Handle as a Function Example

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable.md

Shows how to provide a render function to the `handle` prop, allowing for dynamic creation of custom resize handles based on the `handleAxis`.

```jsx
const handleRender = (handleAxis, ref) => (
  <div
    ref={ref}
    className={`handle-${handleAxis}`}
    style={{ backgroundColor: 'blue' }}
  />
);

<Resizable
  width={200}
  height={200}
  handle={handleRender}
  onResize={(e, { size }) => setDimensions(size)}
>
  <div style={{ width: width + 'px', height: height + 'px' }}>
    Content with function-based handle
  </div>
</Resizable>
```

--------------------------------

### Snap-to-Grid Resize Example

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable.md

Configures the Resizable component to snap to a grid using the `draggableOpts` prop. This example sets the grid to 25x25 pixels.

```jsx
<Resizable
  width={200}
  height={200}
  draggableOpts={{ grid: [25, 25] }}
  onResize={(e, { size }) => setDimensions(size)}
>
  <div style={{ width: width + 'px', height: height + 'px' }}>
    Snaps to 25px increments
  </div>
</Resizable>
```

--------------------------------

### Example of Custom Resize Handle Implementation

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/types.md

An example demonstrating how to implement a custom resize handle using the ResizeHandleFn type. The provided ref must be attached to the root element of the custom handle.

```typescript
const customHandle: ResizeHandleFn = (axis, ref) => (
  <div
    ref={ref}
    className={`resize-handle-${axis}`}
    style={{ cursor: 'pointer' }}
  />
);

<Resizable handle={customHandle} width={200} height={200} />

```

--------------------------------

### Resize Callback Example

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/types.md

An example of how to use the ResizeCallbackData in a TypeScript function to log resize information. This demonstrates accessing the handle and new dimensions.

```typescript
function handleResize(event: React.SyntheticEvent, data: ResizeCallbackData) {
  const {node, size, handle} = data;
  console.log(`Resizing via ${handle}: ${size.width}x${size.height}`);
}
```

--------------------------------

### Transform Scale Example

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable.md

Demonstrates how to use the `transformScale` prop to ensure correct cursor tracking when the resizable element is nested within a scaled container. This example uses a scale of 0.75.

```jsx
<div style={{ transform: 'scale(0.75)' }}>
  <Resizable
    width={200}
    height={200}
    transformScale={0.75}
    onResize={(e, { size }) => setDimensions(size)}
  >
    <div style={{ width: width + 'px', height: height + 'px' }}>
      Cursor tracks correctly with 0.75 scale
    </div>
  </Resizable>
</div>
```

--------------------------------

### Axis Constraint Example

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable.md

Shows how to restrict resizing to a single axis. This example constrains the resizing to only affect the horizontal dimension ('x' axis).

```jsx
<Resizable
  width={200}
  height={200}
  axis="x"
  onResize={(e, { size }) => setWidth(size.width)}
>
  <div style={{ width: width + 'px', height: '200px' }}>
    Resizable only horizontally
  </div>
</Resizable>
```

--------------------------------

### Basic Stateful Resize Example

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable.md

Demonstrates how to implement stateful resizing in a React component. It updates the component's state with the new dimensions whenever a resize event occurs.

```jsx
import React from 'react';
import { Resizable } from 'react-resizable';
import 'react-resizable/css/styles.css';

class MyResizable extends React.Component {
  state = { width: 200, height: 200 };

  onResize = (event, { size, handle }) => {
    this.setState({ width: size.width, height: size.height });
  };

  render() {
    return (
      <Resizable
        width={this.state.width}
        height={this.state.height}
        onResize={this.onResize}
      >
        <div style={{ width: this.state.width + 'px', height: this.state.height + 'px' }}>
          Resizable content
        </div>
      </Resizable>
    );
  }
}
```

--------------------------------

### Basic Merging Example

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/utilities.md

Demonstrates basic merging of style and className props when cloning a React element. The provided props are merged with existing ones, with provided values taking precedence.

```jsx
const original = <div style={{ color: 'red' }} className="box" />;
const cloned = cloneElement(original, {
  style: { fontSize: '14px' },
  className: 'highlight',
});
// Result: <div style={{ color: 'red', fontSize: '14px' }} className="box highlight" />
```

--------------------------------

### Style Override Example

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/utilities.md

Shows how a provided style prop can override an existing style prop on the original element during cloning. Other styles from the original element are preserved.

```jsx
const original = <div style={{ color: 'red', padding: '10px' }} />;
const cloned = cloneElement(original, {
  style: { color: 'blue' },
});
// Result: <div style={{ color: 'blue', padding: '10px' }} />
// (provided color overrides the original)
```

--------------------------------

### Custom Handle Element Example

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable.md

Illustrates how to use a custom React component as a resize handle. The `CustomHandle` component receives a `ref` and `handleAxis` prop to be correctly applied.

```jsx
const CustomHandle = React.forwardRef((props, ref) => (
  <div
    ref={ref}
    className={`custom-resize-handle-${props.handleAxis}`}
    style={{ cursor: 'pointer' }}
  />
));

<Resizable
  width={200}
  height={200}
  handle={<CustomHandle />}
  onResize={(e, { size }) => setDimensions(size)}
>
  <div style={{ width: width + 'px', height: height + 'px' }}>
    Content with custom handle
  </div>
</Resizable>
```

--------------------------------

### Aspect Ratio Locked Resize Example

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable.md

Demonstrates how to lock the aspect ratio of the resizable element, ensuring it maintains a 1:1 ratio during resizing. This is useful for elements that should always be square.

```jsx
<Resizable
  width={200}
  height={200}
  lockAspectRatio={true}
  resizeHandles={['se', 'sw', 'ne', 'nw']}
  onResize={(e, { size }) => setDimensions(size)}
>
  <div style={{ width: width + 'px', height: height + 'px' }}>
    Square (maintains 1:1 ratio)
  </div>
</Resizable>
```

--------------------------------

### Add Hover Effect to Handles

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/configuration.md

Apply visual feedback when a user hovers over a resize handle. This example changes the background color and opacity on hover.

```css
/* Add hover effect */
.react-resizable-handle:hover {
  background-color: darkblue;
  opacity: 0.8;
}
```

--------------------------------

### Uninstalling Old Type Definitions

Source: https://github.com/react-grid-layout/react-resizable/blob/master/README.md

If you previously installed `@types/react-resizable`, remove it to ensure the bundled type declarations take precedence.

```bash
npm uninstall @types/react-resizable
# or
yarn remove @types/react-resizable
```

--------------------------------

### Basic Usage

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable-box.md

Demonstrates the fundamental implementation of ResizableBox with default settings.

```APIDOC
## Basic Usage

### Description
This example shows the simplest way to integrate `ResizableBox` into your application. The component will automatically manage its dimensions based on user interaction.

### Component
```jsx
import { ResizableBox } from 'react-resizable';
import 'react-resizable/css/styles.css';

export default function MyBox() {
  return (
    <ResizableBox width={200} height={200}>
      <div>Resizable content - dimensions auto-managed</div>
    </ResizableBox>
  );
}
```
```

--------------------------------

### With Constraints

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable-box.md

Illustrates how to set minimum and maximum dimensions for the resizable box.

```APIDOC
## With Constraints

### Description
This example demonstrates how to enforce size limitations on the `ResizableBox` using `minConstraints` and `maxConstraints` props.

### Component
```jsx
<ResizableBox
  width={200}
  height={200}
  minConstraints={[150, 150]}
  maxConstraints={[500, 400]}
>
  <p>Min 150x150, Max 500x400</p>
</ResizableBox>
```
```

--------------------------------

### Project Structure Overview

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/MANIFEST.md

Illustrates the directory structure of the generated documentation package. This helps in understanding where to find specific documentation files.

```tree
output/
├── README.md                          (Main overview and quick start)
├── INDEX.md                           (Navigation guide and cross-references)
├── types.md                           (Type definitions reference)
├── configuration.md                   (Configuration options and examples)
├── api-reference/
│   ├── resizable.md                   (Resizable component reference)
│   ├── resizable-box.md               (ResizableBox component reference)
│   └── utilities.md                   (Utility functions reference)
└── MANIFEST.md                        (This file)
```

--------------------------------

### Build Project

Source: https://github.com/react-grid-layout/react-resizable/blob/master/CLAUDE.md

Transpiles JavaScript files from the lib/ directory to the build/ directory.

```bash
yarn build
```

--------------------------------

### With onResize Callback

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable-box.md

Shows how to use the `onResize` callback to track size changes in real-time.

```APIDOC
## With onResize Callback

### Description
This example shows how to use the `onResize` callback to get the current dimensions of the `ResizableBox` as it is being resized.

### Component
```jsx
export default function MyBox() {
  const [info, setInfo] = React.useState('');

  const handleResize = (e, { size }) => {
    setInfo(`${size.width.toFixed(0)}x${size.height.toFixed(0)}`);
  };

  return (
    <>
      <p>Current size: {info}</p>
      <ResizableBox
        width={200}
        height={200}
        onResize={handleResize}
      >
        <div>Resizing...</div>
      </ResizableBox>
    </>
  );
}
```
```

--------------------------------

### Basic Stateful Resize

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable.md

Demonstrates how to use the Resizable component in a stateful manner, updating the component's state with the new dimensions on resize.

```APIDOC
## Basic Stateful Resize

### Description
This example shows a basic implementation of the Resizable component where the parent component manages the width and height state and updates it via the `onResize` callback.

### Usage
```jsx
import React from 'react';
import { Resizable } from 'react-resizable';
import 'react-resizable/css/styles.css';

class MyResizable extends React.Component {
  state = { width: 200, height: 200 };

  onResize = (event, { size, handle }) => {
    this.setState({ width: size.width, height: size.height });
  };

  render() {
    return (
      <Resizable
        width={this.state.width}
        height={this.state.height}
        onResize={this.onResize}
      >
        <div style={{ width: this.state.width + 'px', height: this.state.height + 'px' }}>
          Resizable content
        </div>
      </Resizable>
    );
  }
}
```
```

--------------------------------

### Handle as a Function

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable.md

Shows how to use a render function to create custom resize handles, allowing for dynamic styling or behavior.

```APIDOC
## Handle as a Function

### Description
This example shows how to provide a function to the `handle` prop. This function receives the `handleAxis` and a `ref` as arguments and should return a React element to be used as the resize handle. This allows for dynamic creation of handles based on their axis.

### Usage
```jsx
const handleRender = (handleAxis, ref) => (
  <div
    ref={ref}
    className={`handle-${handleAxis}`}
    style={{ backgroundColor: 'blue' }}
  />
);

<Resizable
  width={200}
  height={200}
  handle={handleRender}
  onResize={(e, { size }) => setDimensions(size)}
>
  <div style={{ width: width + 'px', height: height + 'px' }}>
    Content with function-based handle
  </div>
</Resizable>
```
```

--------------------------------

### Importing Types

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/types.md

Demonstrates how to import all available types from the package root or specific types from the propTypes module.

```APIDOC
## Import Examples

All types can be imported from the package root:

```typescript
import type {
  Axis,
  ResizeHandleAxis,
  ResizeCallbackData,
  DragCallbackData,
  Props,
  DefaultProps,
  ResizeHandleFn,
  ResizableState,
  ResizableBoxState,
  ReactRef,
} from 'react-resizable';
```

Or directly from the propTypes module:

```typescript
import type {
  Axis,
  ResizeHandleAxis,
  ResizeCallbackData,
} from 'react-resizable/lib/propTypes';
```
```

--------------------------------

### Basic ResizableBox Usage

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/README.md

Demonstrates the basic usage of the ResizableBox component for simple resizable elements. Ensure to import the necessary CSS.

```jsx
import { ResizableBox } from 'react-resizable';
import 'react-resizable/css/styles.css';

function MyComponent() {
  return (
    <ResizableBox width={200} height={200} minConstraints={[100, 100]} maxConstraints={[500, 500]}>
      <div>Resizable content</div>
    </ResizableBox>
  );
}
```

--------------------------------

### With Custom Styling and Class

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable-box.md

Shows how to apply custom CSS classes and inline styles to the resizable box.

```APIDOC
## With Custom Styling and Class

### Description
This example shows how to apply custom styling to the `ResizableBox` using the `className` and `style` props.

### Component
```jsx
<ResizableBox
  width={250}
  height={250}
  className="my-box"
  style={{ border: '2px solid blue', padding: '10px' }}
>
  <div>Content with custom styling</div>
</ResizableBox>
```
```

--------------------------------

### With Aspect Ratio and Multiple Handles

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable-box.md

Demonstrates locking the aspect ratio and enabling all resize handles.

```APIDOC
## With Aspect Ratio and Multiple Handles

### Description
This example shows how to maintain a fixed aspect ratio (`lockAspectRatio`) and enable resizing from all eight directions (`resizeHandles`).

### Component
```jsx
<ResizableBox
  width={300}
  height={300}
  lockAspectRatio={true}
  resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}
>
  <div style={{ overflow: 'auto' }}>
    Square content (maintains 1:1 ratio)
  </div>
</ResizableBox>
```
```

--------------------------------

### With Custom Handle

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable-box.md

Explains how to use a custom React component as the resize handle.

```APIDOC
## With Custom Handle

### Description
This example demonstrates how to replace the default resize handle with a custom React component by using the `handle` prop.

### Component
```jsx
const CustomHandle = React.forwardRef((props, ref) => (
  <button ref={ref} className="custom-resize-btn" title={`Resize ${props.handleAxis}`}>
    ⋮⋮
  </button>
));

<ResizableBox
  width={200}
  height={200}
  handle={<CustomHandle />}
  handleSize={[30, 30]}
>
  <div>Custom resize button</div>
</ResizableBox>
```
```

--------------------------------

### With Snap-to-Grid via draggableOpts

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable.md

Configures the Resizable component to snap to a grid during resizing using the `draggableOpts` prop.

```APIDOC
## With Snap-to-Grid via draggableOpts

### Description
This example demonstrates how to enable grid snapping for the resize operation. By providing a `grid` option within the `draggableOpts` prop, the component's dimensions will snap to the specified grid increments during resizing.

### Usage
```jsx
<Resizable
  width={200}
  height={200}
  draggableOpts={{ grid: [25, 25] }}
  onResize={(e, { size }) => setDimensions(size)}
>
  <div style={{ width: width + 'px', height: height + 'px' }}>
    Snaps to 25px increments
  </div>
</Resizable>
```
```

--------------------------------

### Import Stylesheet

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/INDEX.md

Import the required stylesheet for react-resizable to function correctly.

```javascript
import 'react-resizable/css/styles.css';
```

--------------------------------

### Using the Resizable Component

Source: https://github.com/react-grid-layout/react-resizable/blob/master/README.md

Integrate the stateless Resizable component to manage resizing behavior. Listen to onResize callbacks to update your component's state.

```javascript
import { Resizable } from 'react-resizable';
import 'react-resizable/css/styles.css';

class Example extends React.Component {
  state = {
    width: 200,
    height: 200,
  };

  onResize = (event, {node, size, handle}) => {
    this.setState({width: size.width, height: size.height});
  };

  render() {
    return (
      <Resizable
        height={this.state.height}
        width={this.state.width}
        onResize={this.onResize}
      >
        <div
          className="box"
          style={{width: this.state.width + 'px', height: this.state.height + 'px'}}
        >
          <span>Contents</span>
        </div>
      </Resizable>
    );
  }
}
```

--------------------------------

### Stateful Resizable Component Usage

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/README.md

Illustrates how to use the Resizable component for full control over state, including handling resize events to update dimensions. Remember to import the CSS.

```jsx
import { Resizable } from 'react-resizable';
import 'react-resizable/css/styles.css';

class MyResizable extends React.Component {
  state = { width: 200, height: 200 };

  handleResize = (event, { size }) => {
    this.setState({ width: size.width, height: size.height });
  };

  render() {
    return (
      <Resizable
        width={this.state.width}
        height={this.state.height}
        onResize={this.handleResize}
      >
        <div style={{ width: this.state.width + 'px', height: this.state.height + 'px' }}>
          Resizable content
        </div>
      </Resizable>
    );
  }
}
```

--------------------------------

### Multiple Handles and Constraints

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable.md

Configures the Resizable component to use all eight resize handles and sets minimum and maximum constraints for the dimensions.

```APIDOC
## Multiple Handles and Constraints

### Description
This example demonstrates how to enable all eight resize handles (N, S, E, W, NE, NW, SE, SW) and apply minimum and maximum constraints to the resizable dimensions.

### Usage
```jsx
<Resizable
  width={300}
  height={300}
  minConstraints={[150, 150]}
  maxConstraints={[600, 600]}
  resizeHandles={['sw', 'se', 'nw', 'ne', 'w', 'e', 'n', 's']}
  onResize={(e, { size }) => setDimensions(size)}
>
  <div style={{ width: width + 'px', height: height + 'px' }}>
    Content with 8 resize handles
  </div>
</Resizable>
```
```

--------------------------------

### Custom Handle Element

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable.md

Illustrates how to provide a custom React element to be used as a resize handle.

```APIDOC
## Custom Handle Element

### Description
This example demonstrates how to use a custom React component as a resize handle. The `handle` prop accepts a React element, which will be rendered as the handle. The custom handle must forward its ref to the `Resizable` component.

### Usage
```jsx
const CustomHandle = React.forwardRef((props, ref) => (
  <div
    ref={ref}
    className={`custom-resize-handle-${props.handleAxis}`}
    style={{ cursor: 'pointer' }}
  />
));

<Resizable
  width={200}
  height={200}
  handle={<CustomHandle />}
  onResize={(e, { size }) => setDimensions(size)}
>
  <div style={{ width: width + 'px', height: height + 'px' }}>
    Content with custom handle
  </div>
</Resizable>
```
```

--------------------------------

### Resizable Box with Snap-to-Grid

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/00-START-HERE.md

Enable snap-to-grid resizing by providing a grid array to the draggableOpts prop.

```jsx
<ResizableBox
  width={200}
  height={200}
  draggableOpts={{ grid: [25, 25] }}>
  <div>Snaps to 25px increments</div>
</ResizableBox>
```

--------------------------------

### With Drag Grid Snapping

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable-box.md

Configures the resizable box to snap to a specified grid during resizing.

```APIDOC
## With Drag Grid Snapping

### Description
This example demonstrates how to enable grid snapping for resizing operations using the `draggableOpts` prop with a `grid` option.

### Component
```jsx
<ResizableBox
  width={200}
  height={200}
  draggableOpts={{ grid: [50, 50] }}
>
  <div>Snaps to 50px increments</div>
</ResizableBox>
```
```

--------------------------------

### Import Resizable Components

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/INDEX.md

Import the Resizable and ResizableBox components from the react-resizable library.

```typescript
import { Resizable, ResizableBox } from 'react-resizable';
```

--------------------------------

### Using the ResizableBox Component

Source: https://github.com/react-grid-layout/react-resizable/blob/master/README.md

Utilize the ResizableBox component for simple use cases requiring basic state management for resizing. It wraps a div and handles state internally.

```javascript
import { ResizableBox } from 'react-resizable';
import 'react-resizable/css/styles.css';

class Example extends React.Component {
  render() {
    return (
      <ResizableBox
        width={200}
        height={200}
        draggableOpts={{grid: [25, 25]}}
        minConstraints={[100, 100]}
        maxConstraints={[300, 300]}
      >
        <span>Contents</span>
      </ResizableBox>
    );
  }
}
```

--------------------------------

### ResizableBox with All Resize Handles

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/configuration.md

Enables all eight resize handles (n, s, e, w, ne, nw, se, sw) for maximum flexibility in resizing.

```jsx
<ResizableBox
  width={200}
  height={200}
  resizeHandles={['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw']}>
  <div>8 resize handles</div>
</ResizableBox>
```

--------------------------------

### Run Tests with Coverage

Source: https://github.com/react-grid-layout/react-resizable/blob/master/CLAUDE.md

Executes all tests and generates a coverage report using Yarn.

```bash
yarn test
```

--------------------------------

### Use Native DOM Element as Resize Handle

Source: https://github.com/react-grid-layout/react-resizable/blob/master/README.md

Provide a simple DOM element like a div as the resize handle. Ensure the element has a class for styling.

```jsx
<Resizable handle={<div className="foo" />} />
```

--------------------------------

### Import Stylesheet in CSS/SCSS

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/configuration.md

Alternatively, import the stylesheet directly in your CSS or SCSS files. Ensure the path is correct relative to your project structure.

```css
@import 'react-resizable/css/styles.css';
```

--------------------------------

### Use Custom React Component as Resize Handle (Class)

Source: https://github.com/react-grid-layout/react-resizable/blob/master/README.md

Create a custom class component for the resize handle. It must forward the ref using `innerRef` and spread any other props to the underlying DOM element.

```jsx
class MyHandleComponent extends React.Component {
  render() {
    const {handleAxis, innerRef, ...props} = this.props;
    return <div ref={innerRef} className={`foo handle-${handleAxis}`} {...props} />
  }
}
const MyHandle = React.forwardRef((props, ref) => <MyHandleComponent innerRef={ref} {...props} />);

<Resizable handle={<MyHandle />} />
```

--------------------------------

### ResizableBox with onResize Callback

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable-box.md

Utilizes the `onResize` callback to track and display the current dimensions of the box as it's being resized.

```jsx
export default function MyBox() {
  const [info, setInfo] = React.useState('');

  const handleResize = (e, { size }) => {
    setInfo(`${size.width.toFixed(0)}x${size.height.toFixed(0)}`);
  };

  return (
    <>
      <p>Current size: {info}</p>
      <ResizableBox
        width={200}
        height={200}
        onResize={handleResize}
      >
        <div>Resizing...</div>
      </ResizableBox>
    </>
  );
}
```

--------------------------------

### Resizable Box with Min/Max Constraints

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/00-START-HERE.md

Set minimum and maximum dimensions for the resizable box using the minConstraints and maxConstraints props.

```jsx
<ResizableBox
  width={300}
  height={300}
  minConstraints={[150, 150]}
  maxConstraints={[600, 600]}>
  <div>Constrained resizable</div>
</ResizableBox>
```

--------------------------------

### Import Utility Function

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/INDEX.md

Import the cloneElement utility function from the react-resizable library.

```typescript
import { cloneElement } from 'react-resizable/lib/utils';
```

--------------------------------

### ResizableBox with Drag Grid Snapping

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable-box.md

Configures the resizing behavior to snap to a specified grid. The `grid` option takes an array of [width, height].

```jsx
<ResizableBox
  width={200}
  height={200}
  draggableOpts={{ grid: [50, 50] }}
>
  <div>Snaps to 50px increments</div>
</ResizableBox>
```

--------------------------------

### Import Resizable Types

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/INDEX.md

Import various types for defining props, state, and callbacks related to resizing functionality.

```typescript
import type {
  Axis,
  ResizeHandleAxis,
  ResizeCallbackData,
  DragCallbackData,
  Props,
  DefaultProps,
  ResizeHandleFn,
  ResizableState,
  ResizableBoxState,
  ReactRef,
} from 'react-resizable';
```

--------------------------------

### Run a Single Jest Test File

Source: https://github.com/react-grid-layout/react-resizable/blob/master/CLAUDE.md

Executes a specific test file using Jest, useful for debugging.

```bash
npx jest __tests__/Resizable.test.js
```

--------------------------------

### Lint Code with ESLint and Flow

Source: https://github.com/react-grid-layout/react-resizable/blob/master/CLAUDE.md

Performs code linting using ESLint and type checking with Flow.

```bash
yarn lint
```

--------------------------------

### Simple Resizable Box

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/00-START-HERE.md

Use ResizableBox for a simple resizable element. Ensure you import the necessary CSS.

```jsx
import { ResizableBox } from 'react-resizable';
import 'react-resizable/css/styles.css';

<ResizableBox width={200} height={200}>
  <div>Resizable content</div>
</ResizableBox>
```

--------------------------------

### Utility Functions

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/COMPLETION_SUMMARY.txt

Provides utility functions for advanced customization and integration with react-resizable.

```APIDOC
## Utility Functions

### Description
This section documents utility functions available in the react-resizable library that can be used for more advanced customization or integration scenarios.

### `getResizeHandleAxis(props)`

- **Description**: Determines the active resize handle axes based on component props.
- **Parameters**:
  - `props` (object) - The props object of the Resizable or ResizableBox component.
- **Returns** (object) - An object indicating which axes are active for resizing handles.

### `calculateNewSize(width, height, props)`

- **Description**: Calculates the new dimensions based on current size, props, and potential constraints.
- **Parameters**:
  - `width` (number) - The current width.
  - `height` (number) - The current height.
  - `props` (object) - The props object of the Resizable or ResizableBox component.
- **Returns** (object) - An object containing the `width` and `height` after applying constraints and grid snapping.

### Example
```javascript
// Example usage of a hypothetical utility function
// Note: Actual utility function signatures may vary.
import { getResizeHandleAxis } from 'react-resizable';

const componentProps = { minWidth: 100, axis: 'x' };
const activeAxes = getResizeHandleAxis(componentProps);
console.log(activeAxes); // Output might indicate 'x' axis is active
```
```

--------------------------------

### Run Tests in Watch Mode

Source: https://github.com/react-grid-layout/react-resizable/blob/master/CLAUDE.md

Runs unit tests and stays active, re-running tests on file changes.

```bash
yarn unit
```

--------------------------------

### Controlled via Parent Props

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable-box.md

Demonstrates controlling the size of the resizable box from its parent component.

```APIDOC
## Controlled via Parent Props

### Description
This example shows how to control the dimensions of the `ResizableBox` from its parent component by passing `width` and `height` as state variables.

### Component
```jsx
export default function ControlledBox() {
  const [boxSize, setBoxSize] = React.useState({ width: 200, height: 200 });

  return (
    <>
      <button onClick={() => setBoxSize({ width: 300, height: 300 }) }>
        Resize to 300x300
      </button>
      <ResizableBox
        width={boxSize.width}
        height={boxSize.height}
        onResize={(e, { size }) => setBoxSize(size)}
      >
        <div>Parent controls size</div>
      </ResizableBox>
    </>
  );
}
```
```

--------------------------------

### With Transform Scale

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable.md

Applies a CSS transform scale to the parent container and configures the Resizable component to account for it, ensuring correct cursor behavior.

```APIDOC
## With Transform Scale

### Description
This example shows how to use the `transformScale` prop when the `Resizable` component is nested within an element that has a CSS `transform` property applied (e.g., `scale()`). Setting `transformScale` to the same value ensures that the cursor position and resize calculations are accurate.

### Usage
```jsx
<div style={{ transform: 'scale(0.75)' }}>
  <Resizable
    width={200}
    height={200}
    transformScale={0.75}
    onResize={(e, { size }) => setDimensions(size)}
  >
    <div style={{ width: width + 'px', height: height + 'px' }}>
      Cursor tracks correctly with 0.75 scale
    </div>
  </Resizable>
</div>
```
```

--------------------------------

### Minimal ResizableBox Configuration

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/configuration.md

Uses all default settings for ResizableBox, including the southeast handle, no constraints, no aspect ratio locking, and snap-to-grid disabled.

```jsx
<ResizableBox width={200} height={200}>
  <div>Default configuration</div>
</ResizableBox>
```

--------------------------------

### ResizableBox with Constraints

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/api-reference/resizable-box.md

Limits the minimum and maximum dimensions the box can be resized to. Use arrays for [width, height].

```jsx
<ResizableBox
  width={200}
  height={200}
  minConstraints={[150, 150]}
  maxConstraints={[500, 400]}
>
  <p>Min 150x150, Max 500x400</p>
</ResizableBox>
```

--------------------------------

### Configure Grid Snapping in React-Resizable

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/INDEX.md

Enable grid snapping for resizing behavior by providing a grid option to `draggableOpts`. This helps align elements to specific intervals.

```javascript
draggableOpts={{ grid: [25, 25] }}
```

--------------------------------

### ResizableBox with Scaled Parent

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/configuration.md

Ensures correct cursor tracking and resizing behavior when the parent container is scaled using CSS transforms.

```jsx
<div style={{ transform: 'scale(0.75)' }}>
  <ResizableBox
    width={200}
    height={200}
    transformScale={0.75}>
    <div>Cursor tracks correctly with parent scale</div>
  </ResizableBox>
</div>
```

--------------------------------

### Perform Type Checking with Flow

Source: https://github.com/react-grid-layout/react-resizable/blob/master/CLAUDE.md

Runs only the Flow type checker to verify code types.

```bash
yarn flow
```

--------------------------------

### Use Custom React Component as Resize Handle (Functional)

Source: https://github.com/react-grid-layout/react-resizable/blob/master/README.md

Create a custom functional component for the resize handle. Use `React.forwardRef` to pass the ref to the underlying DOM element and spread other props.

```jsx
const MyHandle = React.forwardRef((props, ref) => {
  const {handleAxis, ...restProps} = props;
  return <div ref={ref} className={`foo handle-${handleAxis}`} {...restProps} />;
});

<Resizable handle={<MyHandle />} />
```

--------------------------------

### ResizeHandleFn

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/types.md

Function type for custom resize handle rendering. It accepts the handle axis and a ref, and should return a React element with the ref attached.

```APIDOC
## ResizeHandleFn

### Description
Function type for custom resize handle rendering. It accepts the handle axis and a ref, and should return a React element with the ref attached.

### Parameters
#### Path Parameters
- **resizeHandleAxis** (ResizeHandleAxis) - Required - The handle position being rendered (e.g., 'se', 'n').
- **ref** (React.RefObject<HTMLElement>) - Required - A React ref that must be attached to the underlying DOM element. Required for DraggableCore to function.

### Returns
A React element with the ref attached to its underlying DOM node.

### Example
```typescript
const customHandle: ResizeHandleFn = (axis, ref) => (
  <div
    ref={ref}
    className={`resize-handle-${axis}`}
    style={{ cursor: 'pointer' }}
  />
);

<Resizable handle={customHandle} width={200} height={200} />
```
```

--------------------------------

### CSS Customization for Handles

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/configuration.md

Customize the appearance of resizable handles using CSS. Ensure the `.react-resizable` wrapper has `position: relative`. Match `handleSize` prop with CSS dimensions and use CSS variables for dynamic styling.

```css
.react-resizable-handle {
  background-color: var(--handle-color, gray);
}
```

--------------------------------

### Union Types Usage

Source: https://github.com/react-grid-layout/react-resizable/blob/master/_autodocs/types.md

Illustrates the correct usage of union types like `Axis` and `ResizeHandleAxis` by using their string literal values directly, as they are not runtime enums.

```APIDOC
## Enums vs Union Types

These types are union types, not enums. There are no runtime enum values. Use the string literals directly:

```typescript
// Correct
const axis: Axis = 'x';
const handle: ResizeHandleAxis = 'se';

// Not valid (no enum)
// const axis = Axis.x;
```

This design is chosen for simplicity and ease of use in JSX prop assignments.
```