Wrapper component allowing to resize the content by mouse dragging

Usage no npm install needed!

<script type="module">
  import reactMouseResize from '';



Controlled component allowing to resize the content by mouse dragging

NPM JavaScript Style Guide


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


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) => {
      }} mode={"none"}>
            background: "red",
            width: "100%",
            height: "100%",
            minWidth: "100px",
            minHeight: "100px",

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


MIT © koprivajakub