react-mouse-resize

Controlled component allowing to resize the content by mouse dragging

Install

This library has a peer dependency on react and react-dom 16.8.x since it is using a react hooks. And styled-components. So please be sure to have it installed.

npm install --save styled-components react-mouse-resize
yarn add styled-components react-mouse-resize

Usage

import * as React from 'react'

import HTMLElementResizer from 'react-mouse-resize'

interface Props {}

const App: React.FC<Props> = () => {
  const [size, setSize] = useState({
    width: "auto",
    height: "auto"
  });
  return (
      <HTMLElementResizer size={size} onResized={(size) => {
        setSize(size);
      }} mode={"none"}>
        <div
          style={{
            background: "red",
            width: "100%",
            height: "100%",
            minWidth: "100px",
            minHeight: "100px",
          }}
        >
        </div>
      </HTMLElementResizer>
  );
};

Component properties

property	description
onResized(size: Size)	callback that is triggered once the component resizes
size	object defining the current size of the component
mode	union type defining the resize mode none resize handlers are not available width only width handler is available height only height resize handler is available both width and height resize handlers are available

License

MIT © koprivajakub