react-resizable

What is react-resizable?

The react-resizable package provides a set of React components that can be used to create resizable elements. It is particularly useful for building user interfaces where elements need to be resized by the user, such as in dashboards, forms, or any interactive layout.

What are react-resizable's main functionalities?

Resizable Component

The ResizableBox component allows you to create a resizable element. You can specify constraints such as minimum and maximum width and height.

import React from 'react';
import { ResizableBox } from 'react-resizable';

const ResizableComponent = () => (
  <ResizableBox width={200} height={200} minConstraints={[100, 100]} maxConstraints={[300, 300]}>
    <div style={{ width: '100%', height: '100%', border: '1px solid black' }}>
      Resizable Content
    </div>
  </ResizableBox>
);

export default ResizableComponent;

Resizable Handle

The ResizableBox component can also accept a custom handle for resizing. This allows for more control over the appearance and behavior of the resize handle.

import React from 'react';
import { ResizableBox } from 'react-resizable';

const ResizableHandleComponent = () => (
  <ResizableBox
    width={200}
    height={200}
    minConstraints={[100, 100]}
    maxConstraints={[300, 300]}
    handle={<span className="custom-handle" />}
    handleSize={[8, 8]}
  >
    <div style={{ width: '100%', height: '100%', border: '1px solid black' }}>
      Resizable Content with Custom Handle
    </div>
  </ResizableBox>
);

export default ResizableHandleComponent;

Other packages similar to react-resizable

react-rnd

The react-rnd package provides resizable and draggable components. It offers more flexibility by combining both resizing and dragging functionalities in one package. Compared to react-resizable, react-rnd is more feature-rich and allows for more complex interactions.

react-grid-layout

The react-grid-layout package is a grid layout system for React that allows for both resizing and dragging of grid items. It is particularly useful for creating complex, responsive grid layouts. While react-resizable focuses solely on resizing, react-grid-layout provides a more comprehensive solution for grid-based layouts.

re-resizable

The re-resizable package is another alternative for creating resizable components in React. It offers a similar API to react-resizable but includes additional features such as support for resizing in all directions and more customization options. It is a good alternative if you need more control over the resizing behavior.

README

React-Resizable

View the Demo

A simple widget that can be resized via one or more handles.

You can either use the <Resizable> element directly, or use the much simpler <ResizableBox> element.

See the example and associated code in TestLayout and ResizableBox for more details.

Make sure you use the associated styles in /css/styles.css, as without them, you will have problems with handle placement and visibility.

You can pass options directly to the underlying DraggableCore instance by using the prop draggableOpts. See the demo for more on this.

Installation

$ npm install --save react-resizable

Compatibility

React-Resizable 3.x is compatible with React >= 16.3. React-Resizable 2.x has been skipped. React-Resizable 1.x is compatible with React 14-17.

Usage

This package has two major exports:

• <Resizable>: A raw component that does not have state. Use as a building block for larger components, by listening to its callbacks and setting its props.
• <ResizableBox>: A simple <div {...props} /> element that manages basic state. Convenient for simple use-cases.

<Resizable>

const {Resizable} = require('react-resizable');

// ES6
import { Resizable } from 'react-resizable';

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

  // On top layout
  onResize = (event, {element, 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>
    );
  }
}

<ResizableBox>

const {ResizableBox} = require('react-resizable');

// ES6
import { ResizableBox } from 'react-resizable';

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

Props

These props apply to both <Resizable> and <ResizableBox>. Unknown props that are not in the list below will be passed to the child component.

type ResizeCallbackData = {
  node: HTMLElement,
  size: {width: number, height: number},
  handle: ResizeHandleAxis
};
type ResizeHandleAxis = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';

type ResizableProps =
{
  children: React.Element<any>,
  width: number,
  height: number,
  // Either a ReactElement to be used as handle, or a function returning an element that is fed the handle's location as its first argument.
  handle: ReactElement<any> | (resizeHandle: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>,
  // If you change this, be sure to update your css
  handleSize: [number, number] = [10, 10],
  lockAspectRatio: boolean = false,
  axis: 'both' | 'x' | 'y' | 'none' = 'both',
  minConstraints: [number, number] = [10, 10],
  maxConstraints: [number, number] = [Infinity, Infinity],
  onResizeStop?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
  onResizeStart?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
  onResize?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
  draggableOpts?: ?Object,
  resizeHandles?: ?Array<ResizeHandleAxis> = ['se']
};

The following props can also be used on <ResizableBox>:

{
  style?: Object // styles the returned <div />
}

If a width or height is passed to <ResizableBox>'s style prop, it will be ignored as it is required for internal function.

Resize Handle

If you override the resize handle, we expect that any ref passed to your new handle with represent the underlying DOM element.

This is required, as react-resizable must be able to access the underlying DOM node to attach handlers and measure position deltas.

There are a few ways to do this:

Native DOM Element

This requires no special treatment.

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

Custom React Component

You must forward the ref and props to the underlying DOM element.

Class Components

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 />} />

Functional Components

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

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

Custom Function

You can define a function as a handle, which will simply receive an axis (see above ResizeHandleAxis type) and ref. This may be more clear to read, depending on your coding style.

const MyHandle = (props) => {
  return <div ref={props.innerRef} className="foo" {...props} />;
};

<Resizable handle={(handleAxis, ref) => <MyHandle innerRef={ref} className={`foo handle-${handleAxis}`} {...props} />} />