react-simplikit 0.0.34 → 0.0.36

package/dist/index.d.cts

@@ -4,13 +4,20 @@ export { SwitchCase } from './components/SwitchCase/index.cjs';
 export { useAsyncEffect } from './hooks/useAsyncEffect/index.cjs';
 export { useBooleanState } from './hooks/useBooleanState/index.cjs';
 export { useCallbackOncePerRender } from './hooks/useCallbackOncePerRender/index.cjs';
+export { useControlledState } from './hooks/useControlledState/index.cjs';
 export { useCounter } from './hooks/useCounter/index.cjs';
 export { useDebounce } from './hooks/useDebounce/index.cjs';
+export { useDebouncedCallback } from './hooks/useDebouncedCallback/index.cjs';
+export { useDoubleClick } from './hooks/useDoubleClick/index.cjs';
+export { useGeolocation } from './hooks/useGeolocation/index.cjs';
 export { useImpressionRef } from './hooks/useImpressionRef/index.cjs';
 export { useInputState } from './hooks/useInputState/index.cjs';
 export { useIntersectionObserver } from './hooks/useIntersectionObserver/index.cjs';
 export { useInterval } from './hooks/useInterval/index.cjs';
+export { useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect/index.cjs';
 export { useLoading } from './hooks/useLoading/index.cjs';
+export { useLongPress } from './hooks/useLongPress/index.cjs';
+export { useMap } from './hooks/useMap/index.cjs';
 export { useOutsideClickEffect } from './hooks/useOutsideClickEffect/index.cjs';
 export { usePreservedCallback } from './hooks/usePreservedCallback/index.cjs';
 export { usePreservedReference } from './hooks/usePreservedReference/index.cjs';
@@ -22,6 +29,7 @@ export { useTimeout } from './hooks/useTimeout/index.cjs';
 export { useToggle } from './hooks/useToggle/index.cjs';
 export { useVisibilityEvent } from './hooks/useVisibilityEvent/index.cjs';
 export { buildContext } from './utils/buildContext/index.cjs';
+export { mergeProps } from './utils/mergeProps/index.cjs';
 export { mergeRefs } from './utils/mergeRefs/index.cjs';
-import 'react/jsx-runtime';
 import 'react';
+import 'react/jsx-runtime';

package/esm/components/ImpressionArea/index.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ElementType, Ref, ReactNode } from 'react';
 import { UseImpressionRefOptions } from '../../hooks/useImpressionRef/index.js';
 
@@ -40,6 +40,6 @@ type Props<Tag extends ElementType> = React.ComponentPropsWithoutRef<Tag> & UseI
  *   );
  * }
  */
-declare function ImpressionArea<T extends ElementType = 'div'>({ as, rootMargin, areaThreshold, timeThreshold, onImpressionStart, onImpressionEnd, ref, ...props }: Props<T>): react_jsx_runtime.JSX.Element;
+declare const ImpressionArea: react.ForwardRefExoticComponent<Omit<Props<ElementType>, "ref"> & react.RefAttributes<Element>>;
 
 export { ImpressionArea };

package/esm/components/ImpressionArea/index.js

@@ -1,3 +1,6 @@
+// src/components/ImpressionArea/ImpressionArea.tsx
+import { forwardRef } from "react";
+
 // src/hooks/useImpressionRef/useImpressionRef.ts
 import { useRef as useRef4 } from "react";
 
@@ -241,26 +244,20 @@ function mergeRefs(...refs) {
 
 // src/components/ImpressionArea/ImpressionArea.tsx
 import { jsx } from "react/jsx-runtime";
-function ImpressionArea({
-  as,
-  rootMargin,
-  areaThreshold,
-  timeThreshold,
-  onImpressionStart,
-  onImpressionEnd,
-  ref,
-  ...props
-}) {
-  const Component = as ?? "div";
-  const impressionRef = useImpressionRef({
-    onImpressionStart,
-    onImpressionEnd,
-    areaThreshold,
-    timeThreshold,
-    rootMargin
-  });
-  return /* @__PURE__ */ jsx(Component, { ref: mergeRefs(ref, impressionRef), ...props });
-}
+var ImpressionArea = forwardRef(
+  ({ as, rootMargin, areaThreshold, timeThreshold, onImpressionStart, onImpressionEnd, ...props }, ref) => {
+    const Component = as ?? "div";
+    const impressionRef = useImpressionRef({
+      onImpressionStart,
+      onImpressionEnd,
+      areaThreshold,
+      timeThreshold,
+      rootMargin
+    });
+    return /* @__PURE__ */ jsx(Component, { ref: mergeRefs(ref, impressionRef), ...props });
+  }
+);
+ImpressionArea.displayName = "ImpressionArea";
 export {
   ImpressionArea
 };

package/esm/components/SwitchCase/index.d.ts

@@ -14,15 +14,15 @@ type Props<Case> = {
  * similar to a `switch-case` statement. It is useful when you need to conditionally render different
  * components depending on a specific state.
  *
- * @param {string | number} value - The value to compare against.
+ * @param {Case} value - The value to compare against.
  *   The component associated with the matching key in `caseBy` will be rendered.
- * @param {Record<string | number, () => JSX.Element>} caseBy - An object that maps values to
+ * @param {Partial<{ [P in StringifiedValue<Case>]: () => ReactElement | null }>} caseBy - An object that maps values to
  *   components to render. The keys represent possible values, and the values are functions returning
  *   the corresponding components.
- * @param {() => JSX.Element} [defaultComponent] - The component to render if `value` does not match
+ * @param {() => ReactElement | null} [defaultComponent] - The component to render if `value` does not match
  *   any key in `caseBy`.
  *
- * @returns {JSX.Element} A React component that conditionally renders based on cases.
+ * @returns {ReactElement | null} A React component that conditionally renders based on cases.
  *
  * @example
  * function App() {

package/esm/hooks/useAsyncEffect/index.d.ts

@@ -2,7 +2,7 @@ import { DependencyList } from 'react';
 
 /**
  * @description
- * `useAsyncEffect` is a custom hook for handling asynchronous side effects in React components.
+ * `useAsyncEffect` is a React hook for handling asynchronous side effects in React components.
  * It follows the same cleanup pattern as `useEffect` while ensuring async operations are handled safely.
  *
  * @param {() => Promise<void | (() => void)>} [effect] - An asynchronous function executed in the `useEffect` pattern.

package/esm/hooks/useCallbackOncePerRender/index.d.ts

@@ -2,9 +2,8 @@ import { DependencyList } from 'react';
 
 /**
  * @description
- * A React hook that ensures a callback function is executed only once, regardless of
- * how many times it's called. This is useful for one-time operations that should not
- * be repeated, even if the component re-renders.
+ * `useCallbackOncePerRender` is a React hook that ensures a callback function is executed only once, regardless of how many times it's called.
+ *  This is useful for one-time operations that should not be repeated, even if the component re-renders.
  *
  * @param {() => void} callback - The callback function to be executed once.
  * @param {DependencyList} deps - Dependencies array that will trigger a new one-time execution when changed.

package/esm/hooks/useControlledState/index.d.ts

@@ -13,7 +13,7 @@ type UseControlledStateProps<T> = ControlledState<T> & {
 };
 /**
  * @description
- * `useControlledState` is a hook that allows you to control both controlled and uncontrolled states.
+ * `useControlledState` is a React hook that allows you to control both controlled and uncontrolled states.
  * If you pass the state to `value`, it will be a controlled state, and if you pass the state to `defaultValue`, it will be an uncontrolled state.
  * If both `value` and `defaultValue` are passed, `value` will take precedence.
  *

package/esm/hooks/useCounter/index.d.ts

@@ -1,5 +1,4 @@
 type UseCounterOptions = {
-    initialValue?: number;
     min?: number;
     max?: number;
     step?: number;
@@ -16,8 +15,8 @@ type UseCounterReturn = {
  * `useCounter` is a React hook that manages a numeric counter state with increment, decrement, and reset capabilities.
  * Optionally, you can provide minimum and maximum values to constrain the counter's range.
  *
+ * @param {number} [initialValue=0] - Initial value for the counter. Defaults to 0.
  * @param {UseCounterOptions} options - The options for the counter.
- * @param {number} [options.initialValue=0] - Initial value for the counter. Defaults to 0.
  * @param {number} [options.min] - Minimum value the counter can reach. If not provided, there is no lower limit.
  * @param {number} [options.max] - Maximum value the counter can reach. If not provided, there is no upper limit.
  * @param {number} [options.step=1] - Value to increment or decrement by. Defaults to 1.
@@ -33,8 +32,7 @@ type UseCounterReturn = {
  * import { useCounter } from 'react-simplikit';
  *
  * function ShoppingCart() {
- *   const { count, increment, decrement, reset } = useCounter({
- *     initialValue: 1,
+ *   const { count, increment, decrement, reset } = useCounter(1, {
  *     min: 1,
  *     max: 10,
  *   });
@@ -49,6 +47,6 @@ type UseCounterReturn = {
  *   );
  * }
  */
-declare function useCounter({ initialValue, min, max, step }?: UseCounterOptions): UseCounterReturn;
+declare function useCounter(initialValue?: number, { min, max, step }?: UseCounterOptions): UseCounterReturn;
 
 export { useCounter };

package/esm/hooks/useCounter/index.js

@@ -1,6 +1,6 @@
 // src/hooks/useCounter/useCounter.ts
 import { useCallback, useState } from "react";
-function useCounter({ initialValue = 0, min, max, step = 1 } = {}) {
+function useCounter(initialValue = 0, { min, max, step = 1 } = {}) {
   const validateValue = (value) => {
     let validatedValue = value;
     if (min !== void 0 && validatedValue < min) {

package/esm/hooks/useDebouncedCallback/index.d.ts

@@ -0,0 +1,32 @@
+type DebounceOptions = {
+    leading?: boolean;
+    trailing?: boolean;
+};
+/**
+ * @description
+ * `useDebouncedCallback` is a React hook that returns a debounced version of the provided callback function.
+ * It helps optimize event handling by delaying function execution and grouping multiple calls into one.
+ *
+ * Note that if both 'leading' and 'trailing' are set, the function will be called at both the start and end of the delay period. However, it must be called at least twice within debounceMs interval for this to happen, since one debounced function call cannot trigger the function twice.
+ *
+ * @param {Object} options - The options object.
+ * @param {Function} options.onChange - The callback function to debounce.
+ * @param {number} options.timeThreshold - The number of milliseconds to delay the function execution.
+ * @param {boolean} [options.leading=false] - If `true`, the function is called at the start of the sequence.
+ * @param {boolean} [options.trailing=true] - If `true`, the function is called at the end of the sequence.
+ *
+ * @returns {Function} A debounced function that delays invoking the callback.
+ *
+ * @example
+ * function SearchInput() {
+ *   const [query, setQuery] = useState('');
+ *   const debouncedSetQuery = useDebouncedCallback({ onChange: setQuery, timeThreshold: 100 });
+ *   return <input type="text" onChange={(e) => debouncedSetQuery(e.target.value)} />;
+ * }
+ */
+declare function useDebouncedCallback({ onChange, timeThreshold, leading, trailing, }: DebounceOptions & {
+    onChange: (newValue: boolean) => void;
+    timeThreshold: number;
+}): (nextValue: boolean) => void;
+
+export { useDebouncedCallback };

package/esm/hooks/useDebouncedCallback/index.js

@@ -0,0 +1,117 @@
+// src/hooks/useDebouncedCallback/useDebouncedCallback.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
+
+// src/hooks/useDebounce/debounce.ts
+function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
+  let pendingThis = void 0;
+  let pendingArgs = null;
+  const leading = edges != null && edges.includes("leading");
+  const trailing = edges == null || edges.includes("trailing");
+  const invoke = () => {
+    if (pendingArgs !== null) {
+      func.apply(pendingThis, pendingArgs);
+      pendingThis = void 0;
+      pendingArgs = null;
+    }
+  };
+  const onTimerEnd = () => {
+    if (trailing) {
+      invoke();
+    }
+    cancel();
+  };
+  let timeoutId = null;
+  const schedule = () => {
+    if (timeoutId != null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+      onTimerEnd();
+    }, debounceMs);
+  };
+  const cancelTimer = () => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  };
+  const cancel = () => {
+    cancelTimer();
+    pendingThis = void 0;
+    pendingArgs = null;
+  };
+  const debounced = function(...args) {
+    pendingThis = this;
+    pendingArgs = args;
+    const isFirstCall = timeoutId == null;
+    schedule();
+    if (leading && isFirstCall) {
+      invoke();
+    }
+  };
+  debounced.cancel = cancel;
+  return debounced;
+}
+
+// src/hooks/usePreservedCallback/usePreservedCallback.ts
+import { useCallback, useEffect, useRef } from "react";
+function usePreservedCallback(callback) {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  return useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+// src/hooks/useDebouncedCallback/useDebouncedCallback.ts
+function useDebouncedCallback({
+  onChange,
+  timeThreshold,
+  leading = false,
+  trailing = true
+}) {
+  const handleChange = usePreservedCallback(onChange);
+  const ref = useRef2({ value: false, clearPreviousDebounce: () => {
+  } });
+  useEffect2(() => {
+    const current = ref.current;
+    return () => {
+      current.clearPreviousDebounce();
+    };
+  }, []);
+  const edges = useMemo(() => {
+    const _edges = [];
+    if (leading) {
+      _edges.push("leading");
+    }
+    if (trailing) {
+      _edges.push("trailing");
+    }
+    return _edges;
+  }, [leading, trailing]);
+  return useCallback2(
+    (nextValue) => {
+      if (nextValue === ref.current.value) {
+        return;
+      }
+      const debounced = debounce(
+        () => {
+          handleChange(nextValue);
+          ref.current.value = nextValue;
+        },
+        timeThreshold,
+        { edges }
+      );
+      ref.current.clearPreviousDebounce();
+      debounced();
+      ref.current.clearPreviousDebounce = debounced.cancel;
+    },
+    [handleChange, timeThreshold, edges]
+  );
+}
+export {
+  useDebouncedCallback
+};

package/esm/hooks/useDoubleClick/index.d.ts

@@ -11,10 +11,10 @@ type UseDoubleClickProps<E extends HTMLElement> = {
  * It delays the single click callback execution for a specified time, and cancels it if a second click (i.e. a double click) occurs within that time.
  *
  * @template {HTMLElement} E - The specific type of HTMLElement to be used with this hook (e.g., HTMLButtonElement, HTMLDivElement).
- * @param {Object} params - Configuration options for click handling.
- * @param {number} [params.delay=250] - The number of milliseconds to wait before triggering the single click callback. Defaults to 250ms.
- * @param {(event: MouseEvent<E>) => void} [params.click] - The callback function to be executed on a single click.
- * @param {(event: MouseEvent<E>) => void} params.doubleClick - The callback function to be executed on a double click. Required.
+ * @param {Object} props - Configuration options for click handling.
+ * @param {number} [props.delay=250] - The number of milliseconds to wait before triggering the single click callback. Defaults to 250ms.
+ * @param {(event: MouseEvent<E>) => void} [props.click] - The callback function to be executed on a single click.
+ * @param {(event: MouseEvent<E>) => void} props.doubleClick - The callback function to be executed on a double click. Required.
  *
  * @returns {(event: MouseEvent<E>) => void} A click handler function to attach to an element's `onClick` event.
  *

package/esm/hooks/useGeolocation/index.d.ts

@@ -0,0 +1,106 @@
+declare class CustomGeoLocationError extends Error {
+    code: number;
+    constructor({ code, message }: {
+        message: string;
+        code: number;
+    });
+}
+type GeolocationData = {
+    latitude: number;
+    longitude: number;
+    accuracy: number;
+    altitude: number | null;
+    altitudeAccuracy: number | null;
+    heading: number | null;
+    speed: number | null;
+    timestamp: number;
+};
+declare const GeolocationMountBehavior: {
+    readonly GET: "get";
+    readonly WATCH: "watch";
+};
+type GeolocationMountBehaviorType = (typeof GeolocationMountBehavior)[keyof typeof GeolocationMountBehavior];
+type GeolocationOptions = {
+    mountBehavior?: GeolocationMountBehaviorType;
+} & PositionOptions;
+/**
+ * @description
+ * `useGeolocation` is a React hook that retrieves and tracks the user's geographical location.
+ * It uses the browser's `Geolocation API` to support both one-time position retrieval and continuous location tracking.
+ *
+ * @param {GeolocationOptions} [options] - Geolocation options configuration
+ * @param {GeolocationMountBehaviorType} [options.mountBehavior] - How the hook behaves on mount:
+ *   -- If not provided, no automatic location fetching occurs
+ *   -- `get`: automatically fetches location once when component mounts
+ *   -- `watch`: automatically starts tracking location changes when component mounts
+ * @param {boolean} [options.enableHighAccuracy=false] - If true, provides more accurate position information (increases battery consumption)
+ * @param {number} [options.maximumAge=0] - Maximum age in milliseconds of a cached position that is acceptable to return
+ * @param {number} [options.timeout=Infinity] - Maximum time (in milliseconds) allowed for the location request
+ *
+ * @returns {Object} Object containing location data and related functions
+ * - loading `boolean` - Whether location data is currently being fetched;
+ * - error `CustomGeoLocationError|null` - Error object if an error occurred, or null
+ *   The hook uses standard Geolocation API error codes (`1-3`) and adds a custom code (`0`)
+ *   : `0` - Geolocation is not supported by the environment
+ *   : `1` - User denied permission to access geolocation
+ *   : `2` - Position unavailable
+ *   : `3` - Timeout - geolocation request took too long;
+ * - data `GeolocationData|null` - Location data object or null
+ *   : latitude `number` - The latitude in decimal degrees
+ *   : longitude `number` - The longitude in decimal degrees
+ *   : accuracy `number` - The accuracy of position in meters
+ *   : altitude `number|null` - The altitude in meters above the WGS84 ellipsoid
+ *   : altitudeAccuracy `number|null` - The altitude accuracy in meters
+ *   : heading `number|null` - The heading in degrees clockwise from true north
+ *   : speed `number|null` - The speed in meters per second
+ *   : timestamp `number` - The time when the position was retrieved;
+ * - getCurrentPosition `Function` - Function to get the current position once;
+ * - startTracking `Function` - Function to start tracking location changes;
+ * - stopTracking `Function` - Function to stop tracking location;
+ * - isTracking `boolean` - Whether location tracking is currently active;
+ *
+ * @example
+ * // Basic usage
+ * const {
+ *   loading,
+ *   error,
+ *   data,
+ *   getCurrentPosition
+ * } = useGeolocation();
+ *
+ * // Automatically fetch location when component mounts
+ * const {
+ *   loading,
+ *   error,
+ *   data
+ * } = useGeolocation({ mountBehavior: 'get' });
+ *
+ * // Location tracking
+ * const {
+ *   loading,
+ *   error,
+ *   data,
+ *   startTracking,
+ *   stopTracking,
+ *   isTracking
+ * } = useGeolocation();
+ *
+ * const handleStartTracking = () => {
+ *   startTracking();
+ * };
+ *
+ * const handleStopTracking = () => {
+ *   stopTracking();
+ * };
+ */
+declare function useGeolocation(options?: GeolocationOptions): {
+    getCurrentPosition: () => void;
+    startTracking: () => void;
+    stopTracking: () => void;
+    isTracking: boolean;
+    loading: boolean;
+    error: CustomGeoLocationError | null;
+    data: GeolocationData | null;
+};
+
+export { useGeolocation };

package/esm/hooks/useGeolocation/index.js

@@ -0,0 +1,126 @@
+// src/hooks/useGeolocation/useGeolocation.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+var CustomGeoLocationError = class extends Error {
+  code;
+  constructor({ code, message }) {
+    super(message);
+    this.name = "CustomGeoLocationError";
+    this.code = code;
+  }
+};
+var GeolocationMountBehavior = {
+  GET: "get",
+  WATCH: "watch"
+};
+function useGeolocation(options) {
+  const [state, setState] = useState({
+    loading: !!options?.mountBehavior,
+    error: null,
+    data: null
+  });
+  const [isTracking, setIsTracking] = useState(false);
+  const watchIdRef = useRef(null);
+  const checkGeolocationSupport = useCallback(() => {
+    if (typeof window === "undefined" || navigator.geolocation === void 0) {
+      setState((prev) => ({
+        ...prev,
+        loading: false,
+        error: new CustomGeoLocationError({
+          code: 0,
+          message: "Geolocation is not supported by this environment."
+        })
+      }));
+      return false;
+    }
+    return true;
+  }, []);
+  const handleSuccess = useCallback((position) => {
+    const { coords } = position;
+    setState((prev) => ({
+      ...prev,
+      loading: false,
+      error: null,
+      data: {
+        latitude: coords.latitude,
+        longitude: coords.longitude,
+        accuracy: coords.accuracy,
+        altitude: coords.altitude,
+        altitudeAccuracy: coords.altitudeAccuracy,
+        heading: coords.heading,
+        speed: coords.speed,
+        timestamp: position.timestamp
+      }
+    }));
+  }, []);
+  const handleError = useCallback((error) => {
+    const { code, message } = error;
+    setState((prev) => ({
+      ...prev,
+      loading: false,
+      error: new CustomGeoLocationError({ code, message })
+    }));
+  }, []);
+  const getGeolocationOptions = useCallback(
+    () => ({
+      enableHighAccuracy: options?.enableHighAccuracy,
+      maximumAge: options?.maximumAge,
+      timeout: options?.timeout
+    }),
+    [options?.enableHighAccuracy, options?.maximumAge, options?.timeout]
+  );
+  const getCurrentPosition = useCallback(() => {
+    if (!checkGeolocationSupport()) {
+      return;
+    }
+    setState((prev) => ({ ...prev, loading: true }));
+    navigator.geolocation.getCurrentPosition(handleSuccess, handleError, getGeolocationOptions());
+  }, [handleSuccess, handleError, getGeolocationOptions, checkGeolocationSupport]);
+  const startTracking = useCallback(() => {
+    if (!checkGeolocationSupport()) {
+      return;
+    }
+    if (watchIdRef.current !== null) {
+      navigator.geolocation.clearWatch(watchIdRef.current);
+    }
+    setState((prev) => ({ ...prev, loading: true }));
+    watchIdRef.current = navigator.geolocation.watchPosition(
+      (position) => {
+        setIsTracking(true);
+        handleSuccess(position);
+      },
+      handleError,
+      getGeolocationOptions()
+    );
+  }, [handleSuccess, handleError, getGeolocationOptions, checkGeolocationSupport]);
+  const stopTracking = useCallback(() => {
+    if (watchIdRef.current === null) {
+      return;
+    }
+    navigator.geolocation.clearWatch(watchIdRef.current);
+    watchIdRef.current = null;
+    setIsTracking(false);
+  }, []);
+  useEffect(() => {
+    if (options?.mountBehavior === GeolocationMountBehavior.WATCH) {
+      startTracking();
+    } else if (options?.mountBehavior === GeolocationMountBehavior.GET) {
+      getCurrentPosition();
+    }
+    return () => {
+      if (watchIdRef.current !== null) {
+        navigator.geolocation.clearWatch(watchIdRef.current);
+        watchIdRef.current = null;
+      }
+    };
+  }, [options?.mountBehavior, getCurrentPosition, startTracking]);
+  return {
+    ...state,
+    getCurrentPosition,
+    startTracking,
+    stopTracking,
+    isTracking
+  };
+}
+export {
+  useGeolocation
+};

package/esm/hooks/useImpressionRef/index.d.ts

@@ -7,8 +7,8 @@ type UseImpressionRefOptions = Partial<{
 }>;
 /**
  * @description
- * `useImpressionRef` is a custom hook that measures the time a specific DOM element is visible on the screen and executes callbacks when the element enters or exits the viewport.
- * This hook uses `IntersectionObserver` and the `Visibility API` to track the element's visibility.
+ * `useImpressionRef` is a React hook that measures the time a specific DOM element is visible on the screen and executes callbacks when the element enters or exits the viewport.
+ * It uses `IntersectionObserver` and the `Visibility API` to track the element's visibility.
  *
  * @param {UseImpressionRefOptions} options - Options for tracking the element's visibility.
  * @param {() => void} [options.onImpressionStart] - Callback function executed when the element enters the view

package/esm/hooks/useIntersectionObserver/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * @description
- * `useIntersectionObserver` is a custom hook that detects whether a specific DOM element is visible on the screen.
- * This hook uses the `IntersectionObserver` API to execute a callback when the element enters or exits the viewport.
+ * `useIntersectionObserver` is a React hook that detects whether a specific DOM element is visible on the screen.
+ * It uses the `IntersectionObserver` API to execute a callback when the element enters or exits the viewport.
  *
  * @param {(entry: IntersectionObserverEntry) => void} callback - A callback function that is executed when the visibility of the element changes.
  *   You can check `entry.isIntersecting` to determine if the element is in view.

package/esm/hooks/useIsomorphicLayoutEffect/index.d.ts

@@ -2,11 +2,11 @@ import { useEffect } from 'react';
 
 /**
  * @description
- * During SSR, there is no DOM to synchronously measure or mutate, so React warns about using useLayoutEffect.
+ * `useIsomorphicLayoutEffect` is a React hook that provides the behavior of `useLayoutEffect` without triggering warnings during server-side rendering.
+ * During SSR, there is no DOM to synchronously measure or mutate, so React warns about using `useLayoutEffect`.
  *
- * This hook provides the behavior of useLayoutEffect in the browser without triggering SSR warnings.
+ * This hook runs synchronously after DOM updates but before paint, making it ideal for:
  *
- * It runs synchronously after DOM updates but before paint, making it ideal for:
  * - Measuring DOM elements after render
  * - Applying DOM changes before paint
  * - Preventing UI flashes or layout shifts