useresizehandle

📐 useResizeHandle

A react hook for making elements user resizable

Install

npm install useresizehandle
# or with yarn
yarn add useresizehandle

Usage

import { useResizeHandle } from "useresize";

function Component() {
    const {handleProps, containerProps } = useResizeHandle();

    return (
      <div>
        <div {...containerProps}>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
          <div {...handleProps}
            style={{
              ...handleProps.style,
              width: 30,
              height: 30,
              background: "black"
            }}
        ></div>
      </div>
    )
}

Configuration

The useResizeHandle hook accepts an optional configuration object that can be used to alter the behaviour.

interface UseResizeConfig {
    axis: "horizontal" | "vertical" | "both";
}

const config = {
    axis: "horizontal",
}

const {handleProps, containerProps} = useResizeHandle(config)