synapse-react-client/dist/components/ResizableContainer/hooks/useResizable.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { useState as f, useRef as S, useCallback as r, useEffect as H } from "react";
function W(z = {}) {
  const {
    initialWidth: v = 600,
    initialHeight: w = 500,
    minWidth: o = 300,
    minHeight: c = 200,
    maxWidth: u = 1200,
    maxHeight: a = 800,
    onResize: d
  } = z, [n, m] = f({
    width: v,
    height: w
  }), [i, l] = f(!1), e = S(null), R = r(
    (t) => {
      t.preventDefault(), t.stopPropagation(), l(!0), e.current = {
        x: t.clientX,
        y: t.clientY,
        width: n.width,
        height: n.height
      };
    },
    [n]
  ), s = r(
    (t) => {
      if (!i || !e.current) return;
      const p = t.clientX - e.current.x, x = t.clientY - e.current.y, E = Math.max(
        o,
        Math.min(u, e.current.width + p)
      ), M = Math.max(
        c,
        Math.min(a, e.current.height + x)
      ), g = { width: E, height: M };
      m(g), d?.(g);
    },
    [i, o, u, c, a, d]
  ), h = r(() => {
    l(!1), e.current = null;
  }, []);
  return H(() => (i && (document.addEventListener("mousemove", s), document.addEventListener("mouseup", h)), () => {
    document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", h);
  }), [i, s, h]), {
    width: n.width,
    height: n.height,
    isResizing: i,
    handleResizeStart: R,
    setSize: m
  };
}
export {
  W as useResizable
};
//# sourceMappingURL=useResizable.js.map