react-simplikit 0.0.2 → 0.0.4

package/esm/hooks/useThrottle/index.mjs

@@ -0,0 +1,120 @@
+// src/hooks/useThrottle/useThrottle.ts
+import { useEffect as useEffect2, useMemo as useMemo2 } from "react";
+
+// 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/usePreservedReference/usePreservedReference.ts
+import { useMemo, useRef as useRef2 } from "react";
+function usePreservedReference(value, areValuesEqual = areDeeplyEqual) {
+  const ref = useRef2(value);
+  return 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);
+}
+
+// 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/useThrottle/throttle.ts
+function throttle(func, throttleMs, { edges = ["leading", "trailing"] } = {}) {
+  let pendingAt = null;
+  const debounced = debounce(func, throttleMs, { edges });
+  const throttled = function(...args) {
+    if (pendingAt == null) {
+      pendingAt = Date.now();
+    } else {
+      if (Date.now() - pendingAt >= throttleMs) {
+        pendingAt = Date.now();
+        debounced.cancel();
+        debounced(...args);
+      }
+    }
+    debounced(...args);
+  };
+  throttled.cancel = debounced.cancel;
+  return throttled;
+}
+
+// src/hooks/useThrottle/useThrottle.ts
+function useThrottle(callback, wait, options) {
+  const preservedCallback = usePreservedCallback(callback);
+  const preservedOptions = usePreservedReference(options ?? {});
+  const throttledCallback = useMemo2(() => {
+    return throttle(preservedCallback, wait, preservedOptions);
+  }, [preservedOptions, preservedCallback, wait]);
+  useEffect2(() => {
+    return () => {
+      throttledCallback.cancel();
+    };
+  }, [throttledCallback]);
+  return throttledCallback;
+}
+export {
+  useThrottle
+};

package/esm/hooks/useTimeout/index.d.mts

@@ -0,0 +1,30 @@
+/**
+ * @description
+ * `useTimeout` is a React hook that executes a callback function after a specified delay.
+ * It manages `window.setTimeout` in accordance with the React lifecycle, ensuring cleanup on unmount or when dependencies change.
+ *
+ * @param {() => void} callback - The function to be executed after the delay.
+ * @param {number} [delay=0] - The time in milliseconds to wait before executing the callback.
+ *
+ * @example
+ * // Updating a title after a delay
+ * import { useTimeout } from 'react-simplikit';
+ * import { useState } from 'react';
+ *
+ * function Example() {
+ *   const [title, setTitle] = useState('');
+ *
+ *   useTimeout(() => {
+ *     setTitle('Searching for products...');
+ *   }, 2000);
+ *
+ *   useTimeout(() => {
+ *     setTitle('Almost done...');
+ *   }, 4000);
+ *
+ *   return <div>{title}</div>;
+ * }
+ */
+declare function useTimeout(callback: () => void, delay?: number): void;
+
+export { useTimeout };

package/esm/hooks/useTimeout/index.mjs

@@ -0,0 +1,26 @@
+// src/hooks/useTimeout/useTimeout.ts
+import { useEffect as useEffect2 } from "react";
+
+// 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/useTimeout/useTimeout.ts
+function useTimeout(callback, delay = 0) {
+  const preservedCallback = usePreservedCallback(callback);
+  useEffect2(() => {
+    const timeoutId = window.setTimeout(preservedCallback, delay);
+    return () => window.clearTimeout(timeoutId);
+  }, [delay, preservedCallback]);
+}
+export {
+  useTimeout
+};

package/esm/hooks/useToggle/index.d.mts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+/**
+ * @description
+ * `useToggle` is a React hook that simplifies managing a boolean state.
+ * It provides a function to toggle the state between `true` and `false`.
+ *
+ * @param {boolean} [initialValue=false] - The initial state value. Defaults to `false`.
+ *
+ * @returns {[boolean, () => void]} A tuple:
+ * - `state`: The current state value.
+ * - `toggle`: A function to toggle the state.
+ *
+ * @example
+ * import { useToggle } from 'react-simplikit';
+ *
+ * function Component() {
+ *   const [open, toggle] = useToggle(false);
+ *
+ *   return (
+ *     <div>
+ *       <p>Bottom Sheet state: {open ? 'opened' : 'closed'}</p>
+ *       <button onClick={toggle}>Toggle</button>
+ *     </div>
+ *   );
+ * }
+ */
+declare function useToggle(initialValue?: boolean): [boolean, React.ActionDispatch<[]>];
+
+export { useToggle };

package/esm/hooks/useToggle/index.mjs

@@ -0,0 +1,9 @@
+// src/hooks/useToggle/useToggle.ts
+import { useReducer } from "react";
+function useToggle(initialValue = false) {
+  return useReducer(toggle, initialValue);
+}
+var toggle = (state) => !state;
+export {
+  useToggle
+};

package/esm/hooks/useVisibilityEvent/index.d.mts

@@ -0,0 +1,27 @@
+type Options = {
+    immediate?: boolean;
+};
+/**
+ * @description
+ * A React hook that listens to changes in the document's visibility state and triggers a callback.
+ *
+ * @param {(visibilityState: 'visible' | 'hidden') => void} callback - A function to be called
+ * when the visibility state changes. It receives the current visibility state ('visible' or 'hidden') as an argument.
+ * @param {object} [options] - Optional configuration for the hook.
+ * @param {boolean} [options.immediate=false] - If true, the callback is invoked immediately upon mounting
+ * with the current visibility state.
+ *
+ * @example
+ * import { useVisibilityEvent } from 'react-simplikit';
+ *
+ * function Component() {
+ *   useVisibilityEvent(visibilityState => {
+ *     console.log(`Document is now ${visibilityState}`);
+ *   });
+ *
+ *   return <p>Check the console for visibility changes.</p>;
+ * }
+ */
+declare function useVisibilityEvent(callback: (visibilityState: 'visible' | 'hidden') => void, options?: Options): void;
+
+export { useVisibilityEvent };

package/esm/hooks/useVisibilityEvent/index.mjs

@@ -0,0 +1,19 @@
+// src/hooks/useVisibilityEvent/useVisibilityEvent.ts
+import { useCallback, useEffect } from "react";
+function useVisibilityEvent(callback, options = {}) {
+  const handleVisibilityChange = useCallback(() => {
+    callback(document.visibilityState);
+  }, [callback]);
+  useEffect(() => {
+    if (options?.immediate ?? false) {
+      handleVisibilityChange();
+    }
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [handleVisibilityChange, options?.immediate]);
+}
+export {
+  useVisibilityEvent
+};

package/esm/index.d.mts

@@ -0,0 +1,26 @@
+export { ImpressionArea } from './components/ImpressionArea/index.mjs';
+export { Separated } from './components/Separated/index.mjs';
+export { SwitchCase } from './components/SwitchCase/index.mjs';
+export { useAsyncEffect } from './hooks/useAsyncEffect/index.mjs';
+export { useBooleanState } from './hooks/useBooleanState/index.mjs';
+export { useCallbackOncePerRender } from './hooks/useCallbackOncePerRender/index.mjs';
+export { useDebounce } from './hooks/useDebounce/index.mjs';
+export { useImpressionRef } from './hooks/useImpressionRef/index.mjs';
+export { useInputState } from './hooks/useInputState/index.mjs';
+export { useIntersectionObserver } from './hooks/useIntersectionObserver/index.mjs';
+export { useInterval } from './hooks/useInterval/index.mjs';
+export { useLoading } from './hooks/useLoading/index.mjs';
+export { useOutsideClickEffect } from './hooks/useOutsideClickEffect/index.mjs';
+export { usePreservedCallback } from './hooks/usePreservedCallback/index.mjs';
+export { usePreservedReference } from './hooks/usePreservedReference/index.mjs';
+export { usePrevious } from './hooks/usePrevious/index.mjs';
+export { useRefEffect } from './hooks/useRefEffect/index.mjs';
+export { useStorageState } from './hooks/useStorageState/index.mjs';
+export { useThrottle } from './hooks/useThrottle/index.mjs';
+export { useTimeout } from './hooks/useTimeout/index.mjs';
+export { useToggle } from './hooks/useToggle/index.mjs';
+export { useVisibilityEvent } from './hooks/useVisibilityEvent/index.mjs';
+export { buildContext } from './utils/buildContext/index.mjs';
+export { mergeRefs } from './utils/mergeRefs/index.mjs';
+import 'react/jsx-runtime';
+import 'react';