Resize Event React hook

useOnResize.tsx

type OnResizeFunction = (size: { width: number; height: number }) => void;

export const useOnResize = <T extends React.MutableRefObject<any | null>>(ref: T, onResize: OnResizeFunction) => {
  React.useEffect(() => {
    const callback = () => {
      if (ref.current) {
        onResize({
          width: ref.current.clientWidth,
          height: ref.current.clientHeight,
        });
      }
    };
    callback();
    if (typeof window !== "undefined") {
      window.addEventListener("resize", callback);
    }
    return () => {
      if (typeof window !== "undefined") {
        window.removeEventListener("resize", callback);
      }
    };
  }, []);
};