@react-fabric/core 1.0.0-beta.0

package/src/hooks/useControlledValue.tsx

@@ -0,0 +1,43 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useDeferredValue, useState } from "react";
+import { useEffectDebugger } from "./useEffectDebugger";
+
+export const useControlledValue = <T extends AnyObject = string>(
+  value: T,
+  defaultValue: T,
+) => {
+  const [currentValue, updateValue] = useState<T>(defaultValue);
+  const deferred = useDeferredValue(value);
+
+  useEffectDebugger(
+    () => {
+      updateValue(deferred ?? defaultValue);
+    },
+    [deferred],
+    "useControlledValue change",
+  );
+
+  return { currentValue, updateValue };
+};

package/src/hooks/useDebounce.ts

@@ -0,0 +1,52 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useMemo, useRef } from "react";
+
+export const useDebounce = (
+  callback: undefined | ((...rest: AnyObject) => AnyObject),
+  deps: AnyObject[],
+  delay: number = 100,
+) => {
+  const timerRef = useRef<AnyObject>();
+
+  const cb = useMemo(() => {
+    if (typeof window !== "undefined") {
+      window.clearTimeout(timerRef.current);
+    }
+    const fn = (...args: AnyObject) => {
+      if (typeof window !== "undefined") {
+        window.clearTimeout(timerRef.current);
+        timerRef.current = window.setTimeout(() => callback?.(...args), delay);
+      }
+    };
+    fn.cancel = () => {
+      if (typeof window !== "undefined") {
+        clearTimeout(timerRef.current);
+      }
+    };
+    return fn;
+  }, deps);
+
+  return cb;
+};

package/src/hooks/useEffectDebugger.ts

@@ -0,0 +1,154 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/* istanbul ignore file */
+
+import { useLogger } from "@react-fabric/utilities";
+import {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  type DependencyList,
+  type EffectCallback,
+} from "react";
+
+const loggerM = useLogger("useMemoDebugger");
+const loggerE = useLogger("useEffectDebugger");
+const loggerLE = useLogger("useLayoutEffectDebugger");
+
+const compareInputs = (
+  oldInputs: DependencyList,
+  newInputs: DependencyList,
+  prefix: string,
+  logger: ReturnType<typeof useLogger>,
+) => {
+  if (
+    process.env.NODE_ENV === "production" &&
+    typeof window !== "undefined" &&
+    // @ts-expect-error ignore
+    window.DEBUG_HOOKS !== true
+  )
+    return;
+
+  // Edge-case: different array lengths
+  if (oldInputs.length !== newInputs.length) {
+    // Not helpful to compare item by item, so just output the whole array
+    logger.debug(
+      "Deps have a different length",
+      { process: prefix },
+      oldInputs.length,
+      newInputs.length,
+    );
+    return;
+  }
+
+  // Compare individual items
+  oldInputs.forEach((oldInput: AnyObject, index) => {
+    const newInput: AnyObject = newInputs[index];
+    const diff = [];
+    if (oldInput !== newInput) {
+      diff.push(
+        `Dep [${index}] has a different value`,
+        oldInput?.type?.name ??
+          oldInput?.tagName ??
+          oldInput?.name ??
+          oldInput?.substr?.(0, 24) ??
+          oldInput,
+        newInput?.type?.name ??
+          newInput?.tagName ??
+          newInput?.name ??
+          newInput?.substr?.(0, 24) ??
+          newInput,
+        "\n\n",
+      );
+    }
+    diff.length && logger.debug("Diff", { process: prefix }, ...diff);
+  });
+};
+
+export const useMemoDebugger = <T>(
+  func: () => T,
+  inputs: DependencyList,
+  prefix: string,
+): T => {
+  // Using a ref to hold the inputs from the previous run (or same run for initial run
+  const oldInputsRef = useRef(inputs);
+  return useMemo<T>(() => {
+    // Get the old inputs
+    const oldInputs = oldInputsRef.current;
+
+    // Compare the old inputs to the current inputs
+    compareInputs(oldInputs, inputs, prefix, loggerM);
+
+    // Save the current inputs
+    oldInputsRef.current = inputs;
+
+    // Execute wrapped effect
+    return func();
+  }, inputs);
+};
+
+export const useEffectDebugger = (
+  func: EffectCallback,
+  inputs: DependencyList,
+  prefix: string,
+) => {
+  // Using a ref to hold the inputs from the previous run (or same run for initial run
+  const oldInputsRef = useRef(inputs);
+  useEffect(() => {
+    // Get the old inputs
+    const oldInputs = oldInputsRef.current;
+
+    // Compare the old inputs to the current inputs
+    compareInputs(oldInputs, inputs, prefix, loggerE);
+
+    // Save the current inputs
+    oldInputsRef.current = inputs;
+
+    // Execute wrapped effect
+    return func();
+  }, inputs);
+};
+
+export const useLayoutEffectDebugger = (
+  func: EffectCallback,
+  inputs: DependencyList,
+  prefix: string,
+) => {
+  // Using a ref to hold the inputs from the previous run (or same run for initial run
+  const oldInputsRef = useRef(inputs);
+  useLayoutEffect(() => {
+    // Get the old inputs
+    const oldInputs = oldInputsRef.current;
+
+    // Compare the old inputs to the current inputs
+    compareInputs(oldInputs, inputs, prefix, loggerLE);
+
+    // Save the current inputs
+    oldInputsRef.current = inputs;
+
+    // Execute wrapped effect
+    return func();
+  }, inputs);
+};

package/src/hooks/useIsDark.ts

@@ -0,0 +1,50 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useCallback, useState } from "react";
+import { useLayoutEffectDebugger } from "./useEffectDebugger";
+
+export const useIsDark = () => {
+  const [isDark, setDark] = useState(false);
+  const checkTheme = useCallback(() => {
+    const [r] = getComputedStyle(
+      document.documentElement,
+    ).backgroundColor.match(/\d?\d?\d/g) as AnyObject;
+    setDark(+r < 50);
+  }, []);
+  useLayoutEffectDebugger(
+    () => {
+      if (MutationObserver) {
+        const ob = new MutationObserver(checkTheme);
+        ob.observe(document.documentElement, { attributes: true });
+        checkTheme();
+        return () => {
+          ob.disconnect();
+        };
+      }
+    },
+    [],
+    "useIsDark",
+  );
+  return isDark;
+};

package/src/hooks/useIsRtl.ts

@@ -0,0 +1,46 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useLayoutEffectDebugger } from "./useEffectDebugger";
+
+export const useIsRtl = () => {
+  const { i18n } = useTranslation("core");
+  const [isRtl, setIsRtl] = useState(false);
+
+  /** ***************** update RTL flag on i18n locale change *******************/
+  useLayoutEffectDebugger(
+    () => {
+      try {
+        setIsRtl(i18n.dir() === "rtl");
+      } catch {
+        //
+      }
+    },
+    [i18n.language],
+    "useIsRtl",
+  );
+
+  return isRtl;
+};

package/src/hooks/useNavigator.tsx

@@ -0,0 +1,54 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useCallback, useMemo, useState } from "react";
+
+export const useNavigator = (totalCount = 0, defaultIndex = 0) => {
+  const [currentIndex, setCurrentIndex] = useState(defaultIndex);
+  const onNavigate = useCallback(
+    (dir: 1 | -1) => {
+      if (dir === -1) {
+        setCurrentIndex(currentIndex > 0 ? currentIndex - 1 : totalCount - 1);
+      }
+      if (dir === 1) {
+        setCurrentIndex(currentIndex + 1 < totalCount ? currentIndex + 1 : 0);
+      }
+    },
+    [currentIndex, totalCount],
+  );
+  const headLabel = useMemo(
+    () => (
+      <span className="text-muted leading-none">
+        {currentIndex + 1}/{totalCount}
+      </span>
+    ),
+    [currentIndex, totalCount],
+  );
+
+  return {
+    headLabel,
+    onNavigate,
+    currentIndex,
+    setCurrentIndex,
+  };
+};

package/src/hooks/useOverlayService.tsx

@@ -0,0 +1,51 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useState, type FC, type ReactNode } from "react";
+
+type OverlayComponent = FC<{
+  onClose: (args?: AnyObject) => void;
+  [key: string]: AnyObject;
+}>;
+
+export const useOverlayService = (
+  ModalOrFlyout: OverlayComponent,
+): [
+  Overlay: ReactNode | null,
+  openOverlay: (props?: KeyValue) => Promise<AnyObject>,
+] => {
+  const [Overlay, setOverlay] = useState<ReactNode | null>(null);
+
+  const openOverlay = async ({ onClose, ...props }: KeyValue = {}) => {
+    return await new Promise((resolve) => {
+      const handleClose = (args: AnyObject) => {
+        setOverlay(null);
+        resolve(args);
+        onClose?.(args);
+      };
+      setOverlay(<ModalOrFlyout {...props} onClose={handleClose} />);
+    });
+  };
+
+  return [Overlay, openOverlay];
+};

package/src/hooks/usePropToggle.ts

@@ -0,0 +1,61 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useCallback, useRef, useState, type RefObject } from "react";
+import { useLayoutEffectDebugger } from "./useEffectDebugger";
+
+/**
+ * hook to control boolean props
+ * @param isOn (is prop true)
+ * @param callback (optional callback)
+ * @param key (optional key to pass to callback)
+ * @returns
+ */
+export const usePropToggle = (
+  isOn = false,
+  onToggle?: (is: boolean, key?: string) => unknown,
+  key?: string,
+): [boolean, () => void, RefObject<boolean>] => {
+  const toggleRef = useRef(isOn);
+  const [toggleOn, setToggleOn] = useState(isOn);
+
+  /** ***************** update toggle state on change *******************/
+  useLayoutEffectDebugger(
+    () => {
+      toggleRef.current = isOn;
+      setToggleOn(isOn);
+    },
+    [isOn],
+    "usePropToggle",
+  );
+
+  /** ***************** toggle handler *******************/
+  const doToggle = useCallback(() => {
+    if (onToggle?.(!toggleOn, key) !== false) {
+      toggleRef.current = !toggleOn;
+      setToggleOn(!toggleOn);
+    }
+  }, [toggleOn, onToggle, key]);
+
+  return [toggleOn, doToggle, toggleRef];
+};

package/src/hooks/useResize.ts

@@ -0,0 +1,90 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useCallback, useRef, type RefObject } from "react";
+import { useIsRtl } from "./useIsRtl";
+
+interface Options {
+  /**
+   * is vertical resize
+   */
+  isReverse?: boolean;
+  /**
+   * is vertical resize
+   */
+  isVertical?: boolean;
+  /**
+   * callback on drag start
+   */
+  onStart?: () => void;
+  /**
+   * callback on drag end
+   */
+  onEnd?: () => void;
+}
+
+export const useResize = <T extends HTMLElement = HTMLDivElement>(
+  onResize: (diff: { x: number; y: number }) => void,
+  { isReverse = false, isVertical = false, onStart, onEnd }: Options,
+): { ref: RefObject<T>; onMouseDown: React.MouseEventHandler } => {
+  const refEl = useRef<T>(null);
+  const isRtl = useIsRtl();
+
+  const onResizing = useCallback(
+    (evt: MouseEvent) => {
+      if (refEl.current != null) {
+        /** ***************** check if reverse enabled of RTL *******************/
+        const reversed = ((isRtl ? 1 : 0) ^ (isReverse ? 1 : 0)) === 1;
+        const box = refEl.current?.getBoundingClientRect();
+        const x =
+          (evt.clientX - (reversed ? box.left : box.right)) *
+          (reversed ? -1 : 1);
+        const y = evt.clientY - box.bottom;
+        onResize({ x, y });
+      }
+    },
+    [onResize, isRtl, isReverse],
+  );
+
+  /** ***************** dettach handlers on mouseup *******************/
+  const onResizeEnd = useCallback(() => {
+    document.body.style.cursor = "unset";
+    document.removeEventListener("mousemove", onResizing);
+    document.removeEventListener("mouseup", onResizeEnd);
+    onEnd?.();
+  }, [onEnd, onResizing]);
+
+  /** ***************** attach handlers on mousedown *******************/
+  const onResizeStart = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      document.body.style.cursor = isVertical ? "row-resize" : "col-resize";
+      document.addEventListener("mousemove", onResizing);
+      document.addEventListener("mouseup", onResizeEnd);
+      onStart?.();
+    },
+    [onResizing, onResizeEnd, onStart],
+  );
+
+  return { ref: refEl, onMouseDown: onResizeStart };
+};

package/src/hooks/useResizeObserver.ts

@@ -0,0 +1,55 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { useEffect, useRef, useTransition, type RefObject } from "react";
+import ResizeObserver from "resize-observer-polyfill";
+import { type SizeObject } from "../types";
+import { useDebounce } from "./useDebounce";
+
+export const useResizeObserver = <T extends HTMLElement = HTMLDivElement>(
+  onResize?: (size: SizeObject) => void,
+): RefObject<T> => {
+  const ref = useRef<T>(null);
+  const [, startTransition] = useTransition();
+
+  const callbackResize = useDebounce(() => {
+    startTransition(() => {
+      if (onResize && ref.current != null) {
+        const { offsetWidth: width, offsetHeight: height } = ref.current;
+        onResize?.({ width, height });
+      }
+    });
+  }, [onResize]);
+
+  useEffect(() => {
+    if (ref.current != null) {
+      const ob = new ResizeObserver(callbackResize);
+      ob.observe(ref.current);
+      return () => {
+        ob.disconnect();
+      };
+    }
+  }, [callbackResize, ref]);
+
+  return ref;
+};