A hook that gives you resize logic that you can attach to an element

use-resizer.ts

import { useLocalStore } from 'mobx-react-lite';
import { clamp } from 'lodash';

type Props = {
  height: number;
  maxHeight?: number;
  minWidth: number;
  minHeight: number;
  measureWidth?: boolean;
  measureHeight?: boolean;
  maxWidth?: number;
  onResize?: ({ size: Size, dragging: boolean }) => void;
  onResizeFinish?: () => void;
  width: number;
};

export const useResizer = (props: Props) => {
  const { onResize, onResizeFinish } = props;

  const state = useLocalStore((source: Props) => {
    return {
      fullScreen: false,
      dragging: false,
      measureWidth: true,
      measureHeight: true,
      originalHeight: source.height,
      originalWidth: source.width,
      startY: 0,
      startX: 0,
      heightBeforeMinimize: 0,
      onMouseDown: e => {
        state.dragging = true;

        if (source.measureWidth) {
          state.startX = e.clientX;
          state.originalWidth = source.width;
        }

        if (source.measureHeight) {
          state.startY = e.clientY;
          state.originalHeight = source.height;
        }

        window.document.body.classList.add('no-select');
        document.addEventListener('mousemove', state.onMouseMove);
        document.addEventListener('mouseup', state.onMouseUp);
      },
      measureSide: (
        name,
        currentPosition,
        startPosition,
        original,
        min,
        max,
        currentSize
      ) => {
        const verticalDistance = currentPosition - startPosition;
        const difference = original - verticalDistance;
        const newMeasure = clamp(difference, min, max);
        const sizeHasChanged = newMeasure !== currentSize;

        if (sizeHasChanged) {
          const newSize = { [name]: newMeasure };
          onResize && onResize({ size: newSize, dragging: state.dragging });
          state[name] = newMeasure;
        }
      },
      onMouseMove: e => {
        if (state.dragging) {
          if (source.measureHeight) {
            state.measureSide(
              'height',
              e.clientY,
              state.startY,
              state.originalHeight,
              source.minHeight,
              source.maxHeight,
              source.height
            );
          }
          if (source.measureWidth) {
            state.measureSide(
              'width',
              e.clientX,
              state.startX,
              state.originalWidth,
              source.minWidth,
              source.maxWidth,
              source.height
            );
          }
        }
      },
      onMouseUp: () => {
        state.dragging = false;
        window.document.body.classList.remove('no-select');
        document.removeEventListener('mousemove', state.onMouseMove);
        document.removeEventListener('mouseup', state.onMouseUp);
        onResizeFinish && onResizeFinish();
      },
    };
  }, props);

  return state;
};