react-mouse-resize v0.0.1

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

License

MIT © koprivajakub