React Resizable Hook

A lightweight (1.3kB gzipped!), hooks-based, easy-to-use alternative to react-resizable.

Check out the demo

Installation

npm i react-use-resizable

How to use

The hook returns an object with the following properties:

• rootRef: A ref to the root element of the resizable component
• getRootProps: A function that returns the props to be spread on the root element
• getHandleProps: A function that returns the props to be spread on the handle element

The hooks behavior can be customized by passing an options object to the hook. The options object can have the following properties:

Property	Type	Description	Optional	Default
maxHeight	number	The maximum height of the component	Yes	Infinity
maxWidth	number	The maximum width of the component	Yes	Infinity
minHeight	number	The minimum height of the component	Yes	0
minWidth	number	The minimum width of the component	Yes	0
lockHorizontal	boolean	Whether the component should be horizontally resizable	Yes	false
lockVertical	boolean	Whether the component should be vertically resizable	Yes	false
onResize	function	A callback function that is called when the component is resized	Yes	() => {}
onDragEnd	function	A callback function that is called when the component is done resizing	Yes	() => {}
onDragStart	function	A callback function that is called when the component starts resizing	Yes	() => {}
disabled	boolean	Whether the component should be resizable	Yes	false
interval	number	The interval at which the resize will occur (i.e. which sizes the component will snap to)	Yes	1
initialHeight	number	The initial height of the component	Yes	100
initialWidth	number	The initial width of the component	Yes	100
maintainAspectRatio	boolean	Whether the component should maintain its aspect ratio (ratio between initialHeight and initialWidth) when resizing	Yes	false

Most of these properties can be overridden for each handle by passing passing an options object to the getHandleProps function. The options object can have the following properties:

Property	Type	Description	Optional	Default
maxHeight	number	The maximum height of the component	Yes	Infinity
maxWidth	number	The maximum width of the component	Yes	Infinity
minHeight	number	The minimum height of the component	Yes	0
minWidth	number	The minimum width of the component	Yes	0
lockHorizontal	boolean	Whether the component should be horizontally resizable	Yes	false
lockVertical	boolean	Whether the component should be vertically resizable	Yes	false
onResize	function	A callback function that is called when the component is resized	Yes	() => {}
onDragEnd	function	A callback function that is called when the component is done resizing	Yes	() => {}
onDragStart	function	A callback function that is called when the component starts resizing	Yes	() => {}
disabled	boolean	Whether the component should be resizable	Yes	false
interval	number	The interval at which the resize will occur (i.e. which sizes the component will snap to)	Yes	1
maintainAspectRatio	boolean	Whether the component should maintain its aspect ratio (ratio between initialHeight and initialWidth) when resizing	Yes	false
parent	RefObject<HTMLElement>	A ref to the parent element of the handle	Yes	root element
reverse	boolean	Whether the handle should be reversed	Yes	false

Passing the same property to both the hook and the getHandleProps function will override the hook's property with the getHandleProps property.

The onResize, onDragEnd and onDragStart functions will be invoked with an object containing the following properties:

Property	Type	Description
newHeight	number	The new height of the component
heightDiff	number	The difference in height between the previous and the new height
newWidth	number	The new width of the component
widthDiff	number	The difference in width between the previous and the new width

Example

A simple example of how to use the hook:

import React from 'react';
import { useResizable } from 'react-use-resizable';

const FreeMoving = () => {
  const { getRootProps, getHandleProps } = useResizable({
    initialWidth: 150,
    initialHeight: 150
  });

  return (
    <div>
      <div
        className="bg-blue-500 relative rounded flex justify-center items-center"
        {...getRootProps()}
      >
        <div className="text-white text-center">Free moving</div>

        <div
          className="bg-blue-700 absolute bottom-0 right-0 p-2 rounded-tl-lg rounded-br text-white"
          {...getHandleProps()}
        >
          Handle
        </div>
      </div>
    </div>
  );
};

Many more examples can be found in the demo.