react-simplikit 0.0.48 → 0.0.50

package/esm/hooks/useSet/index.js

@@ -0,0 +1,79 @@
+"use client";
+
+// src/hooks/useSet/useSet.ts
+import { useMemo as useMemo2, useState } from "react";
+
+// src/hooks/usePreservedCallback/usePreservedCallback.ts
+import { useCallback, useEffect, useRef } from "react";
+function usePreservedCallback(callback) {
+  const callbackRef = useRef(callback);
+  useEffect(
+    function syncCallbackRef() {
+      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/useSet/useSet.ts
+function useSet(initialState = /* @__PURE__ */ new Set()) {
+  const [set, setSet] = useState(() => new Set(initialState));
+  const preservedInitialState = usePreservedReference(initialState);
+  const add = usePreservedCallback((value) => {
+    setSet((prev) => {
+      const nextSet = new Set(prev);
+      nextSet.add(value);
+      return nextSet;
+    });
+  });
+  const remove = usePreservedCallback((value) => {
+    setSet((prev) => {
+      const nextSet = new Set(prev);
+      nextSet.delete(value);
+      return nextSet;
+    });
+  });
+  const toggle = usePreservedCallback((value) => {
+    setSet((prev) => {
+      const nextSet = new Set(prev);
+      if (nextSet.has(value)) {
+        nextSet.delete(value);
+      } else {
+        nextSet.add(value);
+      }
+      return nextSet;
+    });
+  });
+  const setAll = usePreservedCallback((values) => {
+    setSet(() => new Set(values));
+  });
+  const reset = usePreservedCallback(() => {
+    setSet(() => new Set(preservedInitialState));
+  });
+  const actions = useMemo2(
+    () => ({ add, remove, toggle, setAll, reset }),
+    [add, remove, toggle, setAll, reset]
+  );
+  return [set, actions];
+}
+export {
+  useSet
+};

package/esm/hooks/useThrottle/index.js

@@ -7,9 +7,12 @@ import { useEffect as useEffect2, useMemo as useMemo2 } from "react";
 import { useCallback, useEffect, useRef } from "react";
 function usePreservedCallback(callback) {
   const callbackRef = useRef(callback);
-  useEffect(() => {
-    callbackRef.current = callback;
-  }, [callback]);
+  useEffect(
+    function syncCallbackRef() {
+      callbackRef.current = callback;
+    },
+    [callback]
+  );
   return useCallback((...args) => {
     return callbackRef.current(...args);
   }, []);

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

@@ -0,0 +1,30 @@
+type ThrottleOptions = {
+    edges?: Array<'leading' | 'trailing'>;
+};
+/**
+ * @description
+ * `useThrottledCallback` is a React hook that returns a throttled version of the provided callback function.
+ * The throttled callback will only be invoked at most once per specified interval.
+ *
+ * @param {Object} options - The options object.
+ * @param {Function} options.onChange - The callback function to throttle.
+ * @param {number} options.timeThreshold - The number of milliseconds to throttle invocations to.
+ * @param {Array<'leading' | 'trailing'>} [options.edges=['leading', 'trailing']] - An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.
+ *
+ * @returns {Function} A throttled function that limits invoking the callback.
+ *
+ * @example
+ * function ScrollTracker() {
+ *   const throttledScroll = useThrottledCallback({
+ *     onChange: (scrollY: number) => console.log(scrollY),
+ *     timeThreshold: 200,
+ *   });
+ *   return <div onScroll={(e) => throttledScroll(e.currentTarget.scrollTop)} />;
+ * }
+ */
+declare function useThrottledCallback({ onChange, timeThreshold, edges, }: ThrottleOptions & {
+    onChange: (newValue: boolean) => void;
+    timeThreshold: number;
+}): (nextValue: boolean) => void;
+
+export { useThrottledCallback };

package/esm/hooks/useThrottledCallback/index.js

@@ -0,0 +1,146 @@
+"use client";
+
+// src/hooks/useThrottledCallback/useThrottledCallback.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef3 } from "react";
+
+// src/hooks/usePreservedCallback/usePreservedCallback.ts
+import { useCallback, useEffect, useRef } from "react";
+function usePreservedCallback(callback) {
+  const callbackRef = useRef(callback);
+  useEffect(
+    function syncCallbackRef() {
+      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);
+  };
+  throttled.cancel = debounced.cancel;
+  return throttled;
+}
+
+// src/hooks/useThrottledCallback/useThrottledCallback.ts
+function useThrottledCallback({
+  onChange,
+  timeThreshold,
+  edges = ["leading", "trailing"]
+}) {
+  const handleChange = usePreservedCallback(onChange);
+  const ref = useRef3({ value: false, clearPreviousThrottle: () => {
+  } });
+  useEffect2(function cleanupThrottleOnUnmount() {
+    const current = ref.current;
+    return () => {
+      current.clearPreviousThrottle();
+    };
+  }, []);
+  const preservedEdges = usePreservedReference(edges);
+  return useCallback2(
+    (nextValue) => {
+      if (nextValue === ref.current.value) {
+        return;
+      }
+      const throttled = throttle(
+        () => {
+          handleChange(nextValue);
+          ref.current.value = nextValue;
+        },
+        timeThreshold,
+        { edges: preservedEdges }
+      );
+      ref.current.clearPreviousThrottle();
+      throttled();
+      ref.current.clearPreviousThrottle = throttled.cancel;
+    },
+    [handleChange, timeThreshold, preservedEdges]
+  );
+}
+export {
+  useThrottledCallback
+};

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

@@ -1,7 +1,7 @@
 /**
  * @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.
+ * It manages `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.

package/esm/hooks/useTimeout/index.js

@@ -7,9 +7,12 @@ import { useEffect as useEffect2 } from "react";
 import { useCallback, useEffect, useRef } from "react";
 function usePreservedCallback(callback) {
   const callbackRef = useRef(callback);
-  useEffect(() => {
-    callbackRef.current = callback;
-  }, [callback]);
+  useEffect(
+    function syncCallbackRef() {
+      callbackRef.current = callback;
+    },
+    [callback]
+  );
   return useCallback((...args) => {
     return callbackRef.current(...args);
   }, []);
@@ -19,8 +22,8 @@ function usePreservedCallback(callback) {
 function useTimeout(callback, delay = 0) {
   const preservedCallback = usePreservedCallback(callback);
   useEffect2(() => {
-    const timeoutId = window.setTimeout(preservedCallback, delay);
-    return () => window.clearTimeout(timeoutId);
+    const timeoutId = setTimeout(preservedCallback, delay);
+    return () => clearTimeout(timeoutId);
   }, [delay, preservedCallback]);
 }
 export {

package/esm/index.d.ts

@@ -15,7 +15,9 @@ export { useImpressionRef } from './hooks/useImpressionRef/index.js';
 export { useInputState } from './hooks/useInputState/index.js';
 export { useIntersectionObserver } from './hooks/useIntersectionObserver/index.js';
 export { useInterval } from './hooks/useInterval/index.js';
+export { useIsClient } from './hooks/useIsClient/index.js';
 export { useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect/index.js';
+export { useList } from './hooks/useList/index.js';
 export { useLoading } from './hooks/useLoading/index.js';
 export { useLongPress } from './hooks/useLongPress/index.js';
 export { useMap } from './hooks/useMap/index.js';
@@ -24,8 +26,10 @@ export { usePreservedCallback } from './hooks/usePreservedCallback/index.js';
 export { usePreservedReference } from './hooks/usePreservedReference/index.js';
 export { usePrevious } from './hooks/usePrevious/index.js';
 export { useRefEffect } from './hooks/useRefEffect/index.js';
+export { useSet } from './hooks/useSet/index.js';
 export { useStorageState } from './hooks/useStorageState/index.js';
 export { useThrottle } from './hooks/useThrottle/index.js';
+export { useThrottledCallback } from './hooks/useThrottledCallback/index.js';
 export { useTimeout } from './hooks/useTimeout/index.js';
 export { useToggle } from './hooks/useToggle/index.js';
 export { useVisibilityEvent } from './hooks/useVisibilityEvent/index.js';