useResizer.js

import React from 'react';

export default function useResizer() {
  let dragging = React.useRef(false);
  let startPos = React.useRef(0);

  const [delta, setDelta] = React.useState(0);
  const [dragEnded, setDragEnded] = React.useState(false);

  React.useEffect(() => {
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', endDrag);

    return () => {
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', endDrag);
    };
  }, []);

  function startDrag(e) {
    dragging.current = true;
    startPos.current = e.screenX;
    setDragEnded(false);
    // console.log("startDrag", startPos.current, dragging.current);
  }

  function onMouseMove(e) {
    if (dragging.current) {
      e.preventDefault();
      const moveDiff = e.screenX - startPos.current;
      // console.log("mouseMove", moveDiff);
      // useDebounce(setDelta(moveDiff), 100);
      setDelta(moveDiff);
    }
  }

  function endDrag(e) {
    dragging.current = false;
    setDragEnded(true);
    // console.log("endDrag", e);
  }

  return {
    onMouseDown: startDrag,
    style: { cursor: 'col-resize' },
    delta,
    dragEnded
  };
}