React Make Resizable

Installation

npm i --save react-make-resizable

Usage Examples

As a normal component

import { Resizable, Resizer } from 'react-make-resizable';

return (
  <Resizable
    onResizeStart={e => console.log(e)}
    onResizeDrag={(e, ({ width, height }), position) => console.log(e, width, height, position)}
    onResizeEnd={(e, ({ width, height }), position) => console.log(e, width, height, position)}
  >
    <div class="my-resizable-element">
      Resizable Box
      <Resizer position="top" />
      <Resizer position="right" />
      <Resizer position="bottom" />
      <Resizer position="left" />
    </div>
  </Resizable>
);

As a HOC

Using makeResizable to wrap your component will remove the need to use Resizable, and automatically handle the onResize* props without you having to pass them through yourself.

import { makeResizable, Resizer } from 'react-make-resizable';

class ResizableBox extends React.Component {
  render() {
    <div class="my-resizable-element">
      Resizable Box
      <Resizer position="top" />
      <Resizer position="right" />
      <Resizer position="bottom" />
      <Resizer position="left" />
    </div>
  }
}

export default makeResizable(ResizableBox);

Components

Resizable

This component adds nothing to the DOM, but must wrap the element that needs to be resizable. It takes the following props:

onResizeStart

Called when the element starts being resized, with the mouse event

onResizeDrag

Called on each update (i.e. when the mouse moves) with the mouse event, current bounding rectangle and the side being dragged

onResizeEnd

Called when the resize ends with the mouse event, final bounding rectangle of the element and the side which was being dragged

makeResizable

Components returned by this HOC take the same props as Resizable, any other props will be passed to the wrapped component.

Resizer

This component is used to make a side of the element resizable. You can make any side of the element resizable or not resizable. You can pass an as prop to render Resizer as a certain element or component. You can also style it.

The position prop must be present and be one of top, right, bottom, left