react-simplikit 0.0.2 → 0.0.3

package/dist/hooks/useIntersectionObserver/index.js

@@ -0,0 +1,91 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/useIntersectionObserver/index.ts
+var useIntersectionObserver_exports = {};
+__export(useIntersectionObserver_exports, {
+  useIntersectionObserver: () => useIntersectionObserver
+});
+module.exports = __toCommonJS(useIntersectionObserver_exports);
+
+// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
+var import_react3 = require("react");
+
+// src/hooks/usePreservedCallback/usePreservedCallback.ts
+var import_react = require("react");
+function usePreservedCallback(callback) {
+  const callbackRef = (0, import_react.useRef)(callback);
+  (0, import_react.useEffect)(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  return (0, import_react.useCallback)((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+// src/hooks/useRefEffect/useRefEffect.ts
+var import_react2 = require("react");
+function useRefEffect(callback, deps) {
+  const preservedCallback = usePreservedCallback(callback);
+  const cleanupCallbackRef = (0, import_react2.useRef)(() => {
+  });
+  const effect = (0, import_react2.useCallback)(
+    (element) => {
+      cleanupCallbackRef.current();
+      cleanupCallbackRef.current = () => {
+      };
+      if (element == null) {
+        return;
+      }
+      const cleanup = preservedCallback(element);
+      if (typeof cleanup === "function") {
+        cleanupCallbackRef.current = cleanup;
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [preservedCallback, ...deps]
+  );
+  return effect;
+}
+
+// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
+function useIntersectionObserver(callback, options) {
+  const preservedCallback = usePreservedCallback(callback);
+  const observer = (0, import_react3.useMemo)(() => {
+    if (typeof IntersectionObserver === "undefined") {
+      return;
+    }
+    return new IntersectionObserver(([entry]) => {
+      preservedCallback(entry);
+    }, options);
+  }, [preservedCallback, options]);
+  return useRefEffect(
+    (element) => {
+      observer?.observe(element);
+      return () => {
+        observer?.unobserve(element);
+      };
+    },
+    [preservedCallback, options]
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useIntersectionObserver
+});

package/dist/hooks/useInterval/index.d.ts

@@ -0,0 +1,37 @@
+type IntervalOptions = number | {
+    delay: number;
+    immediate?: boolean;
+    enabled?: boolean;
+};
+/**
+ * @description
+ * `useInterval` is a React hook that executes a function at a specified interval.
+ * It is useful for timers, polling data, and other recurring tasks.
+ *
+ * @param {() => void} callback - The function to be executed periodically.
+ * @param {number | { delay: number; enabled?: boolean; immediate?: boolean }} options - Configures the interval behavior.
+ * @param {number} options.delay - The interval duration in milliseconds. If `null`, the interval will not run.
+ * @param {boolean} [options.immediate=false] - If `true`, executes immediately before starting the interval.
+ * @param {boolean} [options.enabled=true] - If `false`, the interval will not run.
+ *
+ * @example
+ * import { useInterval } from 'react-simplikit';
+ * import { useState } from 'react';
+ *
+ * function Timer() {
+ *   const [time, setTime] = useState(0);
+ *
+ *   useInterval(() => {
+ *     setTime(prev => prev + 1);
+ *   }, 1000);
+ *
+ *   return (
+ *     <div>
+ *       <p>{time} seconds</p>
+ *     </div>
+ *   );
+ * }
+ */
+declare function useInterval(callback: () => void, options: IntervalOptions): void;
+
+export { useInterval };

package/dist/hooks/useInterval/index.js

@@ -0,0 +1,64 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/useInterval/index.ts
+var useInterval_exports = {};
+__export(useInterval_exports, {
+  useInterval: () => useInterval
+});
+module.exports = __toCommonJS(useInterval_exports);
+
+// src/hooks/useInterval/useInterval.ts
+var import_react2 = require("react");
+
+// src/hooks/usePreservedCallback/usePreservedCallback.ts
+var import_react = require("react");
+function usePreservedCallback(callback) {
+  const callbackRef = (0, import_react.useRef)(callback);
+  (0, import_react.useEffect)(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  return (0, import_react.useCallback)((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+// src/hooks/useInterval/useInterval.ts
+function useInterval(callback, options) {
+  const delay = typeof options === "number" ? options : options.delay;
+  const immediate = typeof options === "number" ? false : options.immediate;
+  const enabled = typeof options === "number" ? true : options.enabled ?? true;
+  const preservedCallback = usePreservedCallback(callback);
+  (0, import_react2.useEffect)(() => {
+    if (immediate === true && enabled) {
+      preservedCallback();
+    }
+  }, [immediate, preservedCallback, enabled]);
+  (0, import_react2.useEffect)(() => {
+    if (!enabled) {
+      return;
+    }
+    const id = window.setInterval(preservedCallback, delay);
+    return () => window.clearInterval(id);
+  }, [delay, preservedCallback, enabled]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useInterval
+});

package/dist/hooks/useLoading/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @description
+ * `useLoading` is a React hook that simplifies managing the loading state of a `Promise`.
+ * It provides a state to track whether an asynchronous operation is in progress and a function to handle the loading state automatically.
+ *
+ * @returns A tuple `[boolean, <T>(promise: Promise<T>) => Promise<T>]`:
+ *
+ * - `boolean`: Represents the current loading state.
+ *    - The initial value is `false`.
+ *    - It is set to `true` when an asynchronous task is in progress.
+ *
+ * - `<T>(promise: Promise<T>) => Promise<T>`: A function that executes asynchronous tasks while managing the loading state.
+ *    - This function takes a `Promise` as an argument and automatically resets the `isLoading` state to `false` when the `Promise` completes.
+ *
+ * @example
+ * function ConfirmButton() {
+ *   const [loading, startLoading] = useLoading();
+ *
+ *   const handleSubmit = useCallback(async () => {
+ *     try {
+ *       const result = await startLoading(postConfirmation());
+ *       router.push(`/success?id=${result.id}`);
+ *     } catch (error) {
+ *       console.error('Error:', error);
+ *     }
+ *   }, [startLoading]);
+ *
+ *   return (
+ *     <button disabled={loading} onClick={handleSubmit}>
+ *       {loading ? 'Loading...' : 'Confirm'}
+ *     </button>
+ *   );
+ * }
+ */
+declare function useLoading(): [boolean, <T>(promise: Promise<T>) => Promise<T>];
+
+export { useLoading };

package/dist/hooks/useLoading/index.js

@@ -0,0 +1,61 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/useLoading/index.ts
+var useLoading_exports = {};
+__export(useLoading_exports, {
+  useLoading: () => useLoading
+});
+module.exports = __toCommonJS(useLoading_exports);
+
+// src/hooks/useLoading/useLoading.ts
+var import_react = require("react");
+function useLoading() {
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const ref = useIsMountedRef();
+  const startTransition = (0, import_react.useCallback)(
+    async (promise) => {
+      try {
+        setLoading(true);
+        const data = await promise;
+        return data;
+      } finally {
+        if (ref.isMounted) {
+          setLoading(false);
+        }
+      }
+    },
+    [ref.isMounted]
+  );
+  return (0, import_react.useMemo)(() => [loading, startTransition], [loading, startTransition]);
+}
+function useIsMountedRef() {
+  const ref = (0, import_react.useRef)({ isMounted: true }).current;
+  (0, import_react.useEffect)(() => {
+    ref.isMounted = true;
+    return () => {
+      ref.isMounted = false;
+    };
+  }, [ref]);
+  return ref;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useLoading
+});

package/dist/hooks/useOutsideClickEffect/index.d.ts

@@ -0,0 +1,27 @@
+type OneOrMore<T> = T | T[];
+/**
+ * @description
+ * `useOutsideClickEffect` is a React hook that triggers a callback when a click event occurs outside the specified container(s).
+ * It is useful for closing modals, dropdowns, tooltips, and other UI components when clicking outside.
+ *
+ * @param {HTMLElement | HTMLElement[] | null} container - A single HTML element, an array of HTML elements, or `null`.
+ *   If `null`, no event listener is attached.
+ * @param {() => void} callback - A function that is executed when clicking outside the specified container(s).
+ *
+ * @example
+ * import { useOutsideClickEffect } from 'react-simplikit';
+ * import { useState } from 'react';
+ *
+ * function Example() {
+ *   const [wrapperEl, setWrapperEl] = useState<HTMLDivElement | null>(null);
+ *
+ *   useOutsideClickEffect(wrapperEl, () => {
+ *     console.log('Outside clicked!');
+ *   });
+ *
+ *   return <div ref={setWrapperEl}>Content</div>;
+ * }
+ */
+declare function useOutsideClickEffect(container: OneOrMore<HTMLElement | null>, callback: () => void): void;
+
+export { useOutsideClickEffect };

package/dist/hooks/useOutsideClickEffect/index.js

@@ -0,0 +1,70 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/useOutsideClickEffect/index.ts
+var useOutsideClickEffect_exports = {};
+__export(useOutsideClickEffect_exports, {
+  useOutsideClickEffect: () => useOutsideClickEffect
+});
+module.exports = __toCommonJS(useOutsideClickEffect_exports);
+
+// src/hooks/useOutsideClickEffect/useOutsideClickEffect.ts
+var import_react2 = require("react");
+
+// src/hooks/usePreservedCallback/usePreservedCallback.ts
+var import_react = require("react");
+function usePreservedCallback(callback) {
+  const callbackRef = (0, import_react.useRef)(callback);
+  (0, import_react.useEffect)(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  return (0, import_react.useCallback)((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+// src/hooks/useOutsideClickEffect/useOutsideClickEffect.ts
+function useOutsideClickEffect(container, callback) {
+  const containers = (0, import_react2.useRef)([]);
+  const handleDocumentClick = usePreservedCallback(({ target }) => {
+    if (target === null) {
+      return;
+    }
+    if (containers.current.length === 0) {
+      return;
+    }
+    if (containers.current.some((x) => x.contains(target))) {
+      return;
+    }
+    callback();
+  });
+  (0, import_react2.useEffect)(() => {
+    containers.current = [container].flat(1).filter((item) => item != null);
+  }, [container]);
+  (0, import_react2.useEffect)(() => {
+    document.addEventListener("click", handleDocumentClick);
+    return () => {
+      document.removeEventListener("click", handleDocumentClick);
+    };
+  }, [handleDocumentClick]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useOutsideClickEffect
+});

package/dist/hooks/usePreservedCallback/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @description
+ * `usePreservedCallback` is a React hook that maintains a stable reference to a callback function
+ * while ensuring it always has access to the latest state or props. This prevents unnecessary re-renders
+ * and simplifies dependency management when passing callbacks to child components or handling event listeners.
+ *
+ * @param {(...args: any[]) => any} callback - The function to preserve.
+ *   It always references the latest state or props, even when the component re-renders.
+ *
+ * @returns {(...args: any[]) => any} A function with the same signature as the input callback.
+ *   The returned function maintains a stable reference while accessing the latest state or props.
+ *
+ * @example
+ * import { usePreservedCallback } from 'react-simplikit';
+ * import { useState } from 'react';
+ *
+ * function Counter() {
+ *   const [count, setCount] = useState(0);
+ *
+ *   const handleClick = usePreservedCallback(() => {
+ *     console.log(`Current count: ${count}`);
+ *     setCount(prev => prev + 1);
+ *   });
+ *
+ *   return <button onClick={handleClick}>Click me</button>;
+ * }
+ */
+declare function usePreservedCallback<Arguments extends any[] = any[], ReturnValue = unknown>(callback: (...args: Arguments) => ReturnValue): (...args: Arguments) => ReturnValue;
+
+export { usePreservedCallback };

package/dist/hooks/usePreservedCallback/index.js

@@ -0,0 +1,41 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/usePreservedCallback/index.ts
+var usePreservedCallback_exports = {};
+__export(usePreservedCallback_exports, {
+  usePreservedCallback: () => usePreservedCallback
+});
+module.exports = __toCommonJS(usePreservedCallback_exports);
+
+// src/hooks/usePreservedCallback/usePreservedCallback.ts
+var import_react = require("react");
+function usePreservedCallback(callback) {
+  const callbackRef = (0, import_react.useRef)(callback);
+  (0, import_react.useEffect)(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  return (0, import_react.useCallback)((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  usePreservedCallback
+});

package/dist/hooks/usePreservedReference/index.d.ts

@@ -0,0 +1,42 @@
+type NotNullishValue = {};
+/**
+ * @description
+ * `usePreservedReference` is a React hook that helps maintain the reference of a value
+ * when it hasn't changed, while ensuring you can safely use the latest state.
+ * It prevents unnecessary re-renders while always allowing access to the latest data.
+ *
+ * @param {T} value - The value to maintain the reference for. It returns a new reference
+ *   if the state value changes after comparison.
+ * @param {(a: T, b: T) => boolean} [areValuesEqual] - An optional function to determine
+ *   if two values are equal. By default, it uses `JSON.stringify` for comparison.
+ *
+ * @returns {T} Returns the same reference if the value is considered equal to the previous one,
+ *   otherwise returns a new reference.
+ *
+ * @example
+ * import { usePreservedReference } from 'react-simplikit';
+ * import { useState } from 'react';
+ *
+ * function ExampleComponent() {
+ *   const [state, setState] = useState({ key: 'value' });
+ *
+ *   const preservedState = usePreservedReference(state);
+ *
+ *   return <div>{preservedState.key}</div>;
+ * }
+ *
+ * @example
+ * import { usePreservedReference } from 'react-simplikit';
+ * import { useState } from 'react';
+ *
+ * function ExampleComponent() {
+ *   const [state, setState] = useState({ key: 'value' });
+ *
+ *   const preservedState = usePreservedReference(state, (a, b) => a.key === b.key);
+ *
+ *   return <div>{preservedState.key}</div>;
+ * }
+ */
+declare function usePreservedReference<T extends NotNullishValue>(value: T, areValuesEqual?: (a: T, b: T) => boolean): T;
+
+export { usePreservedReference };

package/dist/hooks/usePreservedReference/index.js

@@ -0,0 +1,44 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/usePreservedReference/index.ts
+var usePreservedReference_exports = {};
+__export(usePreservedReference_exports, {
+  usePreservedReference: () => usePreservedReference
+});
+module.exports = __toCommonJS(usePreservedReference_exports);
+
+// src/hooks/usePreservedReference/usePreservedReference.ts
+var import_react = require("react");
+function usePreservedReference(value, areValuesEqual = areDeeplyEqual) {
+  const ref = (0, import_react.useRef)(value);
+  return (0, import_react.useMemo)(() => {
+    if (!areValuesEqual(ref.current, value)) {
+      ref.current = value;
+    }
+    return ref.current;
+  }, [areValuesEqual, value]);
+}
+function areDeeplyEqual(x, y) {
+  return JSON.stringify(x) === JSON.stringify(y);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  usePreservedReference
+});

package/dist/hooks/usePrevious/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @description
+ * Returns the previous value of the input state.
+ * If a re-render occurs but the state value does not change, the previous value remains unchanged.
+ * If the state is an object or requires custom change detection, a `compare` function can be provided.
+ * By default, state changes are detected using `prev === next`.
+ *
+ * @template T - The type of the state.
+ * @param {T} state - The state whose previous value is to be tracked.
+ * @param {(prev: T | undefined, next: T) => boolean} [compare] - An optional comparison function to determine if the state has changed.
+ *
+ * @returns {T | undefined} The previous value of the state.
+ *
+ * @example
+ * const [count, setCount] = useState(0);
+ * // initial value of previousCount is `0`
+ * const previousCount = usePrevious(count);
+ */
+declare function usePrevious<T>(state: T, compare?: (prev: T, next: T) => boolean): T;
+
+export { usePrevious };

package/dist/hooks/usePrevious/index.js

@@ -0,0 +1,47 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/usePrevious/index.ts
+var usePrevious_exports = {};
+__export(usePrevious_exports, {
+  usePrevious: () => usePrevious
+});
+module.exports = __toCommonJS(usePrevious_exports);
+
+// src/hooks/usePrevious/usePrevious.ts
+var import_react = require("react");
+var strictEquals = (prev, next) => prev === next;
+function usePrevious(state, compare = strictEquals) {
+  const prevRef = (0, import_react.useRef)(state);
+  const currentRef = (0, import_react.useRef)(state);
+  const isFirstRender = (0, import_react.useRef)(true);
+  (0, import_react.useEffect)(() => {
+    isFirstRender.current = false;
+  }, []);
+  if (isFirstRender.current || compare(currentRef.current, state)) {
+    return prevRef.current;
+  }
+  prevRef.current = currentRef.current;
+  currentRef.current = state;
+  return prevRef.current;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  usePrevious
+});

package/dist/hooks/useRefEffect/index.d.ts

@@ -0,0 +1,31 @@
+import { DependencyList } from 'react';
+
+type CleanupCallback = () => void;
+/**
+ * @description
+ * `useRefEffect` is a custom hook that helps you set a reference to a specific DOM element and execute a callback whenever the element changes.
+ * This hook calls a cleanup function whenever the element changes to prevent memory leaks.
+ *
+ * @param callback - A callback function that is executed when the element is set. This function can return a cleanup function.
+ * @param deps - An array of dependencies that define when the callback should be re-executed. The `callback` is re-executed whenever the `deps` change.
+ *
+ * @returns A function to set the element. Pass this function to the `ref` attribute, and the `callback` will be called whenever the element changes.
+ *
+ * @example
+ * import { useRefEffect } from 'react-simplikit';
+ *
+ * function Component() {
+ *   const ref = useRefEffect<HTMLDivElement>(element => {
+ *     console.log('Element mounted:', element);
+ *
+ *     return () => {
+ *       console.log('Element unmounted:', element);
+ *     };
+ *   }, []);
+ *
+ *   return <div ref={ref}>Basic Example</div>;
+ * }
+ */
+declare function useRefEffect<Element extends HTMLElement = HTMLElement>(callback: (element: Element) => CleanupCallback | void, deps: DependencyList): (element: Element | null) => void;
+
+export { useRefEffect };