react-simplikit 0.0.50 → 0.0.52

package/{esm/hooks/useVisibilityEvent/index.d.ts → dist/hooks/useVisibilityEvent/useVisibilityEvent.d.cts}

@@ -1,5 +1,7 @@
+
+//#region src/hooks/useVisibilityEvent/useVisibilityEvent.d.ts
 type Options = {
-    immediate?: boolean;
+  immediate?: boolean;
 };
 /**
  * @deprecated This hook is deprecated as it depends on browser-specific APIs (document.visibilityState).
@@ -27,5 +29,5 @@ type Options = {
  * }
  */
 declare function useVisibilityEvent(callback: (visibilityState: 'visible' | 'hidden') => void, options?: Options): void;
-
-export { useVisibilityEvent };
+//#endregion
+export { useVisibilityEvent };

package/dist/hooks/useVisibilityEvent/{index.d.cts → useVisibilityEvent.d.mts}

@@ -1,5 +1,7 @@
+
+//#region src/hooks/useVisibilityEvent/useVisibilityEvent.d.ts
 type Options = {
-    immediate?: boolean;
+  immediate?: boolean;
 };
 /**
  * @deprecated This hook is deprecated as it depends on browser-specific APIs (document.visibilityState).
@@ -27,5 +29,5 @@ type Options = {
  * }
  */
 declare function useVisibilityEvent(callback: (visibilityState: 'visible' | 'hidden') => void, options?: Options): void;
-
-export { useVisibilityEvent };
+//#endregion
+export { useVisibilityEvent };

package/dist/hooks/useVisibilityEvent/useVisibilityEvent.mjs

@@ -0,0 +1,42 @@
+"use client";
+import { useCallback, useEffect } from "react";
+//#region src/hooks/useVisibilityEvent/useVisibilityEvent.ts
+/**
+* @deprecated This hook is deprecated as it depends on browser-specific APIs (document.visibilityState).
+* react-simplikit is now focused on platform-independent, pure state/logic hooks.
+* This hook will be removed in a future major version.
+*
+* @description
+* `useVisibilityEvent` is 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>;
+* }
+*/
+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]);
+}
+//#endregion
+export { useVisibilityEvent };