sse-hooks 1.0.0 → 1.1.0

package/README.md

@@ -0,0 +1,40 @@
+## 🪝 Available Hooks
+
+<!-- HOOKS:START -->
+
+- [`useBoolean`](/docs/use-boolean) — handles boolean state with useful utility functions.
+- [`useClickAnyWhere`](/docs/use-click-any-where) — handles click events anywhere on the document.
+- [`useCookie`](/docs/use-cookie) — manages state synchronized with a browser [cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies).
+It handles serialization, prefixes, updates across tabs, and custom event synchronization.
+- [`useCopyToClipboard`](/docs/use-copy-to-clipboard) — copies text to the clipboard using the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API).
+- [`useCountdown`](/docs/use-countdown) — manages countdown.
+- [`useCounter`](/docs/use-counter) — manages a counter with increment, decrement, reset, and setCount functionalities.
+- [`useDarkMode`](/docs/use-dark-mode) — returns the current state of the dark mode.
+- [`useDebounceCallback`](/docs/use-debounce-callback) — creates a debounced version of a callback function.
+- [`useDebounceValue`](/docs/use-debounce-value) — returns a debounced version of the provided value, along with a function to update it.
+- [`useDocumentTitle`](/docs/use-document-title) — sets the document title.
+- [`useEventCallback`](/docs/use-event-callback) — creates a memoized event callback.
+- [`useEventListener`](/docs/use-event-listener) — 
+- [`useFetch`](/docs/use-fetch) — provides a wrapper around the native [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to handle HTTP requests with state management, abort capability, and TypeScript support.
+- [`useHover`](/docs/use-hover) — tracks whether a DOM element is being hovered over.
+- [`useIndexedDB`](/docs/use-indexed-d-b) — provides an interface to the [IndexedDB API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) for client-side storage of significant amounts of structured data.
+- [`useIntersectionObserver`](/docs/use-intersection-observer) — tracks the intersection of a DOM element with its containing element or the viewport using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
+- [`useInterval`](/docs/use-interval) — creates an interval that invokes a callback function at a specified delay using the [setInterval API](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval).
+- [`useIsClient`](/docs/use-is-client) — determines if the code is running on the client side (in the browser).
+- [`useIsMounted`](/docs/use-is-mounted) — determines if the component is currently mounted.
+- [`useLocalStorage`](/docs/use-local-storage) — uses the [localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to persist state across page reloads.
+- [`useMap`](/docs/use-map) — manages a key-value [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) state with setter actions.
+- [`useMediaQuery`](/docs/use-media-query) — tracks the state of a media query using the [Match Media API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
+- [`useReadLocalStorage`](/docs/use-read-local-storage) — 
+- [`useResizeObserver`](/docs/use-resize-observer) — observes the size of an element using the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
+- [`useScreen`](/docs/use-screen) — 
+- [`useScript`](/docs/use-script) — dynamically loads scripts and tracking their loading status.
+- [`useScrollLock`](/docs/use-scroll-lock) — A custom hook that locks and unlocks scroll.
+- [`useSessionStorage`](/docs/use-session-storage) — uses the [sessionStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) to persist state across page reloads.
+- [`useStep`](/docs/use-step) — manages and navigates between steps in a multi-step process.
+- [`useTernaryDarkMode`](/docs/use-ternary-dark-mode) — manages ternary (system, dark, light) dark mode with local storage support.
+- [`useTimeout`](/docs/use-timeout) — handles timeouts in React components using the [setTimeout API](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout).
+- [`useToggle`](/docs/use-toggle) — manages a boolean toggle state in React components.
+- [`useUnmount`](/docs/use-unmount) — runs a cleanup function when the component is unmounted.
+- [`useWindowSize`](/docs/use-window-size) — 
+<!-- HOOKS:END -->

package/dist/index.cjs

@@ -24,6 +24,150 @@ function useBoolean(defaultValue = false) {
   return { value, setValue, setTrue, setFalse, toggle };
 }
 
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+
+function useEventListener(eventName, handler, element, options) {
+  const savedHandler = react.useRef(handler);
+  useIsomorphicLayoutEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+  react.useEffect(() => {
+    const targetElement = element?.current ?? window;
+    if (!(targetElement && targetElement.addEventListener)) return;
+    const listener = (event) => {
+      savedHandler.current(event);
+    };
+    targetElement.addEventListener(eventName, listener, options);
+    return () => {
+      targetElement.removeEventListener(eventName, listener, options);
+    };
+  }, [eventName, element, options]);
+}
+
+function useClickAnyWhere(handler) {
+  useEventListener("click", (event) => {
+    handler(event);
+  });
+}
+
+function useEventCallback(fn) {
+  const ref = react.useRef(() => {
+    throw new Error("Cannot call an event handler while rendering.");
+  });
+  useIsomorphicLayoutEffect(() => {
+    ref.current = fn;
+  }, [fn]);
+  return react.useCallback((...args) => ref.current?.(...args), [ref]);
+}
+
+const IS_SERVER$7 = typeof document === "undefined";
+function parseCookies() {
+  if (IS_SERVER$7) return {};
+  return document.cookie.split("; ").reduce(
+    (acc, part) => {
+      const [k, ...v] = part.split("=");
+      if (k && v) {
+        acc[decodeURIComponent(k.trim())] = decodeURIComponent(v.join("="));
+      }
+      return acc;
+    },
+    {}
+  );
+}
+function buildCookie(key, value, options) {
+  let cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+  if (options.path) cookie += `; path=${options.path}`;
+  if (options.domain) cookie += `; domain=${options.domain}`;
+  if (options.expires) cookie += `; expires=${options.expires.toUTCString()}`;
+  if (options.maxAge) cookie += `; max-age=${options.maxAge}`;
+  if (options.secure) cookie += `; secure`;
+  if (options.sameSite) cookie += `; samesite=${options.sameSite}`;
+  return cookie;
+}
+function useCookie(key, initialValue, options = {}) {
+  const { initializeWithValue = true, prefix = "" } = options;
+  const cookieKey = prefix + key;
+  const serializer = react.useCallback(
+    (value) => {
+      if (options.serializer) return options.serializer(value);
+      return JSON.stringify(value);
+    },
+    [options]
+  );
+  const deserializer = react.useCallback(
+    (value) => {
+      if (options.deserializer) return options.deserializer(value);
+      if (value === "undefined") return void 0;
+      const fallback = initialValue instanceof Function ? initialValue() : initialValue;
+      try {
+        return JSON.parse(value);
+      } catch {
+        return fallback;
+      }
+    },
+    [options, initialValue]
+  );
+  const readValue = react.useCallback(() => {
+    const fallback = initialValue instanceof Function ? initialValue() : initialValue;
+    if (IS_SERVER$7) return fallback;
+    const cookies = parseCookies();
+    if (!(cookieKey in cookies)) return fallback;
+    return deserializer(cookies[cookieKey]);
+  }, [cookieKey, deserializer, initialValue]);
+  const [storedValue, setStoredValue] = react.useState(() => {
+    if (initializeWithValue) return readValue();
+    return initialValue instanceof Function ? initialValue() : initialValue;
+  });
+  const setValue = useEventCallback((value) => {
+    if (IS_SERVER$7) return;
+    try {
+      const newValue = value instanceof Function ? value(readValue()) : value;
+      const serialized = serializer(newValue);
+      document.cookie = buildCookie(cookieKey, serialized, {
+        path: "/",
+        ...options
+      });
+      setStoredValue(newValue);
+      window.dispatchEvent(
+        new CustomEvent("cookie-change", { detail: { key: cookieKey } })
+      );
+    } catch (error) {
+      console.warn(`Error setting cookie "${cookieKey}":`, error);
+    }
+  });
+  const removeValue = useEventCallback(() => {
+    if (IS_SERVER$7) return;
+    const fallback = initialValue instanceof Function ? initialValue() : initialValue;
+    document.cookie = buildCookie(cookieKey, "", {
+      path: "/",
+      ...options,
+      expires: /* @__PURE__ */ new Date(0)
+    });
+    setStoredValue(fallback);
+    window.dispatchEvent(
+      new CustomEvent("cookie-change", { detail: { key: cookieKey } })
+    );
+  });
+  react.useEffect(() => {
+    setStoredValue(readValue());
+  }, [cookieKey]);
+  const handleChange = react.useCallback(
+    (event) => {
+      if ("detail" in event && event.detail?.key !== cookieKey) return;
+      if ("key" in event && event.key !== cookieKey) return;
+      setStoredValue(readValue());
+    },
+    [cookieKey, readValue]
+  );
+  useEventListener("cookie-change", handleChange);
+  useEventListener("visibilitychange", () => {
+    if (document.visibilityState === "visible") {
+      setStoredValue(readValue());
+    }
+  });
+  return [storedValue, setValue, removeValue];
+}
+
 function useCopyToClipboard() {
   const [copiedText, setCopiedText] = react.useState(null);
   const copy = react.useCallback(async (text) => {
@@ -64,8 +208,6 @@ function useCounter(initialValue) {
   };
 }
 
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
-
 function useInterval(callback, delay) {
   const savedCallback = react.useRef(callback);
   useIsomorphicLayoutEffect(() => {
@@ -120,34 +262,6 @@ function useCountdown({
   return [count, { startCountdown, stopCountdown, resetCountdown }];
 }
 
-function useEventCallback(fn) {
-  const ref = react.useRef(() => {
-    throw new Error("Cannot call an event handler while rendering.");
-  });
-  useIsomorphicLayoutEffect(() => {
-    ref.current = fn;
-  }, [fn]);
-  return react.useCallback((...args) => ref.current?.(...args), [ref]);
-}
-
-function useEventListener(eventName, handler, element, options) {
-  const savedHandler = react.useRef(handler);
-  useIsomorphicLayoutEffect(() => {
-    savedHandler.current = handler;
-  }, [handler]);
-  react.useEffect(() => {
-    const targetElement = element?.current ?? window;
-    if (!(targetElement && targetElement.addEventListener)) return;
-    const listener = (event) => {
-      savedHandler.current(event);
-    };
-    targetElement.addEventListener(eventName, listener, options);
-    return () => {
-      targetElement.removeEventListener(eventName, listener, options);
-    };
-  }, [eventName, element, options]);
-}
-
 const IS_SERVER$6 = typeof window === "undefined";
 function useLocalStorage(key, initialValue, options = {}) {
   const { initializeWithValue = true } = options;
@@ -282,7 +396,7 @@ function useMediaQuery(query, {
 }
 
 const COLOR_SCHEME_QUERY$1 = "(prefers-color-scheme: dark)";
-const LOCAL_STORAGE_KEY$1 = "usehooks-ts-dark-mode";
+const LOCAL_STORAGE_KEY$1 = "sse-hooks-dark-mode";
 function useDarkMode(options = {}) {
   const {
     defaultValue,
@@ -1110,23 +1224,21 @@ function useSessionStorage(key, initialValue, options = {}) {
     }
     return initialValue instanceof Function ? initialValue() : initialValue;
   });
-  const setValue = useEventCallback(
-    (value) => {
-      if (IS_SERVER$1) {
-        console.warn(
-          `Tried setting sessionStorage key \u201C${key}\u201D even though environment is not a client`
-        );
-      }
-      try {
-        const newValue = value instanceof Function ? value(readValue()) : value;
-        window.sessionStorage.setItem(key, serializer(newValue));
-        setStoredValue(newValue);
-        window.dispatchEvent(new StorageEvent("session-storage", { key }));
-      } catch (error) {
-        console.warn(`Error setting sessionStorage key \u201C${key}\u201D:`, error);
-      }
+  const setValue = useEventCallback((value) => {
+    if (IS_SERVER$1) {
+      console.warn(
+        `Tried setting sessionStorage key \u201C${key}\u201D even though environment is not a client`
+      );
     }
-  );
+    try {
+      const newValue = value instanceof Function ? value(readValue()) : value;
+      window.sessionStorage.setItem(key, serializer(newValue));
+      setStoredValue(newValue);
+      window.dispatchEvent(new StorageEvent("session-storage", { key }));
+    } catch (error) {
+      console.warn(`Error setting sessionStorage key \u201C${key}\u201D:`, error);
+    }
+  });
   const removeValue = useEventCallback(() => {
     if (IS_SERVER$1) {
       console.warn(
@@ -1197,7 +1309,7 @@ function useStep(maxStep) {
 }
 
 const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)";
-const LOCAL_STORAGE_KEY = "usehooks-ts-ternary-dark-mode";
+const LOCAL_STORAGE_KEY = "sse-hooks-ternary-dark-mode";
 function useTernaryDarkMode({
   defaultValue = "system",
   localStorageKey = LOCAL_STORAGE_KEY,
@@ -1286,6 +1398,8 @@ function useWindowSize(options = {}) {
 }
 
 exports.useBoolean = useBoolean;
+exports.useClickAnyWhere = useClickAnyWhere;
+exports.useCookie = useCookie;
 exports.useCopyToClipboard = useCopyToClipboard;
 exports.useCountdown = useCountdown;
 exports.useCounter = useCounter;