@zohodesk/docs-builder/es/components/Preview/useResizer.js

docs-builder is used to build your own docs

import { useEffect, useState } from 'react';
export function useResizer(_ref) {
  let {
    resizerHandleRef,
    resizableElementRef,
    orientation = 'vertical',
    enabled = true,
    onWidthChange,
    onResizeStart
  } = _ref;
  const [isResizing, setIsResizing] = useState(false);
  useEffect(() => {
    if (!enabled) {
      // If resizing is not needed, return early
      return;
    }

    const bottomResizer = resizerHandleRef.current;
    const sidebar = resizableElementRef.current;
    const isHorizontal = orientation === 'horizontal';
    let y = 0;
    let h = 0;
    let x = 0;
    let w = 0;

    function br_mousedownHandler(e) {
      setIsResizing(true);
      onResizeStart && onResizeStart(true);

      if (isHorizontal) {
        y = e.clientY;
        const sbHeight = window.getComputedStyle(sidebar).height;
        h = parseInt(sbHeight, 10);
      } else {
        x = e.clientX;
        const sbWidth = window.getComputedStyle(sidebar).width;
        w = parseInt(sbWidth, 10);
      }

      document.addEventListener('mousemove', br_mousemoveHandler);
      document.addEventListener('mouseup', br_mouseupHandler);
    }

    function br_mousemoveHandler(e) {
      if (isHorizontal) {
        const dy = e.clientY - y;
        const ch = h + dy; // complete height

        sidebar.style.height = `${ch}px`;
        onWidthChange && onWidthChange(ch);
      } else {
        const dx = e.clientX - x;
        const cw = w + dx; // complete width

        sidebar.style.width = `${cw}px`;
        onWidthChange && onWidthChange(cw);
      }
    }

    function br_mouseupHandler() {
      setIsResizing(false); // remove event mousemove && mouseup

      document.removeEventListener('mouseup', br_mouseupHandler);
      document.removeEventListener('mousemove', br_mousemoveHandler);
    }

    bottomResizer && bottomResizer.addEventListener('mousedown', br_mousedownHandler);
    return () => {
      // Cleanup event listeners
      bottomResizer && bottomResizer.removeEventListener('mousedown', br_mousedownHandler);
    };
  }, [resizerHandleRef, resizableElementRef, orientation, enabled]);
  return {
    isResizing
  };
}