react-resizable

The `react-resizable` library provides a React component that allows its children to be resized by dragging resize handles. It's built on top of `react-draggable` and is often used in conjunction with `react-grid-layout` for creating interactive, resizable, and draggable grid-based layouts, though it can be used independently for any resizable UI element.

Key features of `react-resizable`:

1. Flexible Resize Handles: You can specify which resize handles (e.g., 's' for south, 'e' for east, 'se' for southeast, 'n', 'w', 'nw', 'ne', 'sw', or 'all') are active, allowing for resizing from one or multiple directions.
2. Minimum and Maximum Constraints: Define `minConstraints` and `maxConstraints` to limit the resizeable component's dimensions, preventing it from becoming too small or too large.
3. Aspect Ratio Locking: The `lockAspectRatio` prop allows the component to maintain its aspect ratio during resizing.
4. Event Callbacks: It provides lifecycle callbacks such as `onResizeStart`, `onResize`, and `onResizeStop`, which allow you to react to the resizing process. The `onResize` callback provides the current dimensions, enabling you to update your component's state or perform other actions.
5. Customizable Styles: While it comes with default CSS styles (which need to be imported), you can easily override them or apply your own custom styles to the resize handles and the container.
6. `Resizable` vs. `ResizableBox`: The library exports two main components: `Resizable` and `ResizableBox`. `Resizable` is a lower-level component that requires you to manage its width and height state externally. `ResizableBox` is a higher-level component that manages its own width and height state internally, making it simpler for most use cases where you just want a self-contained resizable element.

Installation:
To use `react-resizable`, you typically install it via npm or yarn:
`npm install react-resizable`
or
`yarn add react-resizable`

You also need to import its default CSS styles for the handles to appear correctly: `import 'react-resizable/css/styles.css';`

`react-resizable` is highly useful for building dashboards, configurable widgets, image manipulation tools, or any application where users need to dynamically adjust the size of UI elements.

import React, { useState } from 'react';
import { ResizableBox } from 'react-resizable';
import 'react-resizable/css/styles.css'; // Import default styles

function ResizableComponent() {
  const [width, setWidth] = useState(200);
  const [height, setHeight] = useState(200);

  // Callback function for when the box is resized
  const onResize = (event, { element, size, handle }) => {
    setWidth(size.width);
    setHeight(size.height);
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>React ResizableBox Example</h1>
      <p>Drag the bottom-right corner to resize the box.</p>
      <ResizableBox
        width={width}
        height={height}
        minConstraints={[100, 100]} // Minimum width and height
        maxConstraints={[500, 400]} // Maximum width and height
        lockAspectRatio={false} // Lock aspect ratio during resize
        resizeHandles={['se']} // Only enable the southeast (bottom-right) handle
        onResize={onResize} // Callback for resize events
        className="example-box"
        style={{
          background: '#e0f7fa',
          border: '2px solid #00bcd4',
          borderRadius: '8px',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          textAlign: 'center',
          boxSizing: 'border-box', // Important for consistent sizing
          padding: '10px'
        }}
      >
        <h2>Resizable Content</h2>
        <p>Current Dimensions:</p>
        <p>Width: {width.toFixed(0)}px</p>
        <p>Height: {height.toFixed(0)}px</p>
      </ResizableBox>
      <p style={{ marginTop: '20px', fontSize: '0.9em', color: '#666' }}>
        This box uses `ResizableBox` which internally manages its size. `onResize` provides updated dimensions.
      </p>
    </div>
  );
}

export default ResizableComponent;