react-simplikit 0.0.50 → 0.0.52

package/dist/hooks/useImpressionRef/useImpressionRef.mjs

@@ -0,0 +1,67 @@
+"use client";
+import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallback.mjs";
+import { useDebouncedCallback } from "../useDebouncedCallback/useDebouncedCallback.mjs";
+import { useIntersectionObserver } from "../useIntersectionObserver/useIntersectionObserver.mjs";
+import { useVisibilityEvent } from "../useVisibilityEvent/useVisibilityEvent.mjs";
+import { useRef } from "react";
+//#region src/hooks/useImpressionRef/useImpressionRef.ts
+/**
+* @deprecated This hook is deprecated as it depends on browser-specific APIs (IntersectionObserver, Visibility API).
+* react-simplikit is now focused on platform-independent, pure state/logic hooks.
+* This hook will be removed in a future major version.
+*
+* @description
+* `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
+* @param {() => void} [options.onImpressionEnd] - Callback function executed when the element exits the view
+* @param {number} [options.timeThreshold=0] - Minimum time the element must be visible (in milliseconds)
+* @param {number} [options.areaThreshold=0] - Minimum ratio of the element that must be visible (0 to 1)
+* @param {string} options.rootMargin - Margin to adjust the detection area
+*
+* @returns {(element: Element | null) => void} A function to set the element. Attach this function to the `ref` attribute, and the callbacks will be executed whenever the element's visibility changes.
+*
+* @example
+* import { useImpressionRef } from 'react-simplikit';
+*
+* function Component() {
+*   const ref = useImpressionRef<HTMLDivElement>({
+*     onImpressionStart: () => console.log('Element entered view'),
+*     onImpressionEnd: () => console.log('Element exited view'),
+*     timeThreshold: 1000,
+*     areaThreshold: 0.5,
+*   });
+*
+*   return <div ref={ref}>Track my visibility!</div>;
+* }
+*/
+function useImpressionRef({ onImpressionStart = () => {}, onImpressionEnd = () => {}, rootMargin, areaThreshold = 0, timeThreshold = 0 }) {
+	const impressionStartHandler = usePreservedCallback(onImpressionStart);
+	const impressionEndHandler = usePreservedCallback(onImpressionEnd);
+	const isIntersectingRef = useRef(false);
+	const impressionEventHandler = useDebouncedCallback({
+		timeThreshold,
+		onChange: (impressed) => {
+			(impressed ? impressionStartHandler : impressionEndHandler)();
+		},
+		leading: true
+	});
+	useVisibilityEvent((documentVisible) => {
+		if (!isIntersectingRef.current) return;
+		impressionEventHandler(documentVisible === "visible");
+	});
+	return useIntersectionObserver((entry) => {
+		if (document.visibilityState === "hidden") return;
+		const currentRatio = entry.intersectionRatio;
+		const isIntersecting = areaThreshold === 0 ? entry.isIntersecting : currentRatio >= areaThreshold;
+		isIntersectingRef.current = isIntersecting;
+		impressionEventHandler(isIntersecting);
+	}, {
+		rootMargin,
+		threshold: areaThreshold
+	});
+}
+//#endregion
+export { useImpressionRef };

package/dist/hooks/useInputState/index.d.cts

@@ -1,23 +1,3 @@
-import { ChangeEventHandler } from 'react';
 
-/**
- * @description
- * `useInputState` is a React hook that manages an input state with optional value transformation.
- *
- * @param {string} [initialValue=""] - The initial value of the input. Defaults to an empty string (`""`).
- * @param {(value: string) => string} [transformValue=(v: string) => v] - A function to transform the input value.
- *   Defaults to an identity function that returns the input unchanged.
- *
- * @returns {[value: string, onChange: ChangeEventHandler<HTMLInputElement>]} A tuple containing:
- * - value `string` - The current state value;
- * - onChange `ChangeEventHandler<HTMLInputElement>` - A function to update the state;
- *
- * @example
- * function Example() {
- *   const [value, onChange] = useInputState('');
- *   return <input type="text" value={value} onChange={onChange} />;
- * }
- */
-declare function useInputState(initialValue?: string, transformValue?: (value: string) => string): readonly [string, ChangeEventHandler<HTMLInputElement>];
-
-export { useInputState };
+import { useInputState } from "./useInputState.cjs";
+export { useInputState };

package/dist/hooks/useInputState/index.d.mts

@@ -0,0 +1,3 @@
+
+import { useInputState } from "./useInputState.mjs";
+export { useInputState };

package/dist/hooks/useInputState/useInputState.cjs

@@ -0,0 +1,32 @@
+"use client";
+let react = require("react");
+//#region src/hooks/useInputState/useInputState.ts
+/**
+* @description
+* `useInputState` is a React hook that manages an input state with optional value transformation.
+*
+* @param {string} [initialValue=""] - The initial value of the input. Defaults to an empty string (`""`).
+* @param {(value: string) => string} [transformValue=(v: string) => v] - A function to transform the input value.
+*   Defaults to an identity function that returns the input unchanged.
+*
+* @returns {[value: string, onChange: ChangeEventHandler<HTMLInputElement>]} A tuple containing:
+* - value `string` - The current state value;
+* - onChange `ChangeEventHandler<HTMLInputElement>` - A function to update the state;
+*
+* @example
+* function Example() {
+*   const [value, onChange] = useInputState('');
+*   return <input type="text" value={value} onChange={onChange} />;
+* }
+*/
+function useInputState(initialValue = "", transformValue = echo) {
+	const [value, setValue] = (0, react.useState)(initialValue);
+	return [value, (0, react.useCallback)(({ target: { value } }) => {
+		setValue(transformValue(value));
+	}, [transformValue])];
+}
+function echo(v) {
+	return v;
+}
+//#endregion
+exports.useInputState = useInputState;

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

@@ -1,5 +1,6 @@
-import { ChangeEventHandler } from 'react';
 
+import { ChangeEventHandler } from "react";
+//#region src/hooks/useInputState/useInputState.d.ts
 /**
  * @description
  * `useInputState` is a React hook that manages an input state with optional value transformation.
@@ -19,5 +20,5 @@ import { ChangeEventHandler } from 'react';
  * }
  */
 declare function useInputState(initialValue?: string, transformValue?: (value: string) => string): readonly [string, ChangeEventHandler<HTMLInputElement>];
-
-export { useInputState };
+//#endregion
+export { useInputState };

package/dist/hooks/useInputState/useInputState.d.mts

@@ -0,0 +1,24 @@
+
+import { ChangeEventHandler } from "react";
+//#region src/hooks/useInputState/useInputState.d.ts
+/**
+ * @description
+ * `useInputState` is a React hook that manages an input state with optional value transformation.
+ *
+ * @param {string} [initialValue=""] - The initial value of the input. Defaults to an empty string (`""`).
+ * @param {(value: string) => string} [transformValue=(v: string) => v] - A function to transform the input value.
+ *   Defaults to an identity function that returns the input unchanged.
+ *
+ * @returns {[value: string, onChange: ChangeEventHandler<HTMLInputElement>]} A tuple containing:
+ * - value `string` - The current state value;
+ * - onChange `ChangeEventHandler<HTMLInputElement>` - A function to update the state;
+ *
+ * @example
+ * function Example() {
+ *   const [value, onChange] = useInputState('');
+ *   return <input type="text" value={value} onChange={onChange} />;
+ * }
+ */
+declare function useInputState(initialValue?: string, transformValue?: (value: string) => string): readonly [string, ChangeEventHandler<HTMLInputElement>];
+//#endregion
+export { useInputState };

package/dist/hooks/useInputState/useInputState.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { useCallback, useState } from "react";
+//#region src/hooks/useInputState/useInputState.ts
+/**
+* @description
+* `useInputState` is a React hook that manages an input state with optional value transformation.
+*
+* @param {string} [initialValue=""] - The initial value of the input. Defaults to an empty string (`""`).
+* @param {(value: string) => string} [transformValue=(v: string) => v] - A function to transform the input value.
+*   Defaults to an identity function that returns the input unchanged.
+*
+* @returns {[value: string, onChange: ChangeEventHandler<HTMLInputElement>]} A tuple containing:
+* - value `string` - The current state value;
+* - onChange `ChangeEventHandler<HTMLInputElement>` - A function to update the state;
+*
+* @example
+* function Example() {
+*   const [value, onChange] = useInputState('');
+*   return <input type="text" value={value} onChange={onChange} />;
+* }
+*/
+function useInputState(initialValue = "", transformValue = echo) {
+	const [value, setValue] = useState(initialValue);
+	return [value, useCallback(({ target: { value } }) => {
+		setValue(transformValue(value));
+	}, [transformValue])];
+}
+function echo(v) {
+	return v;
+}
+//#endregion
+export { useInputState };

package/dist/hooks/useIntersectionObserver/useIntersectionObserver.cjs

@@ -0,0 +1,58 @@
+"use client";
+const require_usePreservedCallback = require("../usePreservedCallback/usePreservedCallback.cjs");
+const require_useRefEffect = require("../useRefEffect/useRefEffect.cjs");
+let react = require("react");
+//#region src/hooks/useIntersectionObserver/useIntersectionObserver.ts
+/**
+* @deprecated This hook is deprecated as it depends on browser-specific APIs (IntersectionObserver).
+* react-simplikit is now focused on platform-independent, pure state/logic hooks.
+* This hook will be removed in a future major version.
+*
+* @description
+* `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.
+* @param {IntersectionObserverInit} options - Options for the `IntersectionObserver`.
+* @param {boolean} [options.root] - The element that is used as the viewport for checking visibility of the target.
+* @param {string} [options.rootMargin] - Margin around the root.
+* @param {number | number[]} [options.threshold] - Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.
+*
+* @returns {(element: Element | null) => void} A function to set the element. Attach this function to the `ref` attribute, and the `callback` will be executed whenever the element's visibility changes.
+*
+* @example
+* import { useIntersectionObserver } from 'react-simplikit';
+*
+* function Component() {
+*   const ref = useIntersectionObserver<HTMLDivElement>(
+*     entry => {
+*       if (entry.isIntersecting) {
+*         console.log('Element is in view:', entry.target);
+*       } else {
+*         console.log('Element is out of view:', entry.target);
+*       }
+*     },
+*     { threshold: 0.5 }
+*   );
+*
+*   return <div ref={ref}>Observe me!</div>;
+* }
+*/
+function useIntersectionObserver(callback, options) {
+	const preservedCallback = require_usePreservedCallback.usePreservedCallback(callback);
+	const observer = (0, react.useMemo)(() => {
+		if (typeof IntersectionObserver === "undefined") return;
+		return new IntersectionObserver(([entry]) => {
+			preservedCallback(entry);
+		}, options);
+	}, [preservedCallback, options]);
+	return require_useRefEffect.useRefEffect((element) => {
+		observer?.observe(element);
+		return () => {
+			observer?.unobserve(element);
+		};
+	}, [preservedCallback, options]);
+}
+//#endregion
+exports.useIntersectionObserver = useIntersectionObserver;

package/dist/hooks/useIntersectionObserver/{index.d.cts → useIntersectionObserver.d.cts}

@@ -1,3 +1,5 @@
+
+//#region src/hooks/useIntersectionObserver/useIntersectionObserver.d.ts
 /**
  * @deprecated This hook is deprecated as it depends on browser-specific APIs (IntersectionObserver).
  * react-simplikit is now focused on platform-independent, pure state/logic hooks.
@@ -35,5 +37,5 @@
  * }
  */
 declare function useIntersectionObserver<Element extends HTMLElement>(callback: (entry: IntersectionObserverEntry) => void, options: IntersectionObserverInit): (element: Element | null) => void;
-
-export { useIntersectionObserver };
+//#endregion
+export { useIntersectionObserver };

package/{esm/hooks/useIntersectionObserver/index.d.ts → dist/hooks/useIntersectionObserver/useIntersectionObserver.d.mts}

@@ -1,3 +1,5 @@
+
+//#region src/hooks/useIntersectionObserver/useIntersectionObserver.d.ts
 /**
  * @deprecated This hook is deprecated as it depends on browser-specific APIs (IntersectionObserver).
  * react-simplikit is now focused on platform-independent, pure state/logic hooks.
@@ -35,5 +37,5 @@
  * }
  */
 declare function useIntersectionObserver<Element extends HTMLElement>(callback: (entry: IntersectionObserverEntry) => void, options: IntersectionObserverInit): (element: Element | null) => void;
-
-export { useIntersectionObserver };
+//#endregion
+export { useIntersectionObserver };

package/dist/hooks/useIntersectionObserver/useIntersectionObserver.mjs

@@ -0,0 +1,58 @@
+"use client";
+import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallback.mjs";
+import { useRefEffect } from "../useRefEffect/useRefEffect.mjs";
+import { useMemo } from "react";
+//#region src/hooks/useIntersectionObserver/useIntersectionObserver.ts
+/**
+* @deprecated This hook is deprecated as it depends on browser-specific APIs (IntersectionObserver).
+* react-simplikit is now focused on platform-independent, pure state/logic hooks.
+* This hook will be removed in a future major version.
+*
+* @description
+* `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.
+* @param {IntersectionObserverInit} options - Options for the `IntersectionObserver`.
+* @param {boolean} [options.root] - The element that is used as the viewport for checking visibility of the target.
+* @param {string} [options.rootMargin] - Margin around the root.
+* @param {number | number[]} [options.threshold] - Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.
+*
+* @returns {(element: Element | null) => void} A function to set the element. Attach this function to the `ref` attribute, and the `callback` will be executed whenever the element's visibility changes.
+*
+* @example
+* import { useIntersectionObserver } from 'react-simplikit';
+*
+* function Component() {
+*   const ref = useIntersectionObserver<HTMLDivElement>(
+*     entry => {
+*       if (entry.isIntersecting) {
+*         console.log('Element is in view:', entry.target);
+*       } else {
+*         console.log('Element is out of view:', entry.target);
+*       }
+*     },
+*     { threshold: 0.5 }
+*   );
+*
+*   return <div ref={ref}>Observe me!</div>;
+* }
+*/
+function useIntersectionObserver(callback, options) {
+	const preservedCallback = usePreservedCallback(callback);
+	const observer = useMemo(() => {
+		if (typeof IntersectionObserver === "undefined") return;
+		return new IntersectionObserver(([entry]) => {
+			preservedCallback(entry);
+		}, options);
+	}, [preservedCallback, options]);
+	return useRefEffect((element) => {
+		observer?.observe(element);
+		return () => {
+			observer?.unobserve(element);
+		};
+	}, [preservedCallback, options]);
+}
+//#endregion
+export { useIntersectionObserver };

package/dist/hooks/useInterval/useInterval.cjs

@@ -0,0 +1,65 @@
+"use client";
+const require_usePreservedCallback = require("../usePreservedCallback/usePreservedCallback.cjs");
+let react = require("react");
+//#region src/hooks/useInterval/useInterval.ts
+/**
+* @description
+* `useInterval` is a React hook that executes a function at a specified interval.
+* It is useful for timers, polling data, and other recurring tasks.
+*
+* @param {() => void} callback - The function to be executed periodically.
+* @param {number | { delay: number; enabled?: boolean; immediate?: boolean }} options - Configures the interval behavior.
+* @param {number} options.delay - The interval duration in milliseconds. If `null`, the interval will not run.
+* @param {boolean} [options.immediate=false] - If `true`, executes immediately before starting the interval.
+* @param {boolean} [options.enabled=true] - If `false`, the interval will not run.
+*
+* @example
+* import { useInterval } from 'react-simplikit';
+* import { useState } from 'react';
+*
+* function Timer() {
+*   const [time, setTime] = useState(0);
+*
+*   useInterval(() => {
+*     setTime(prev => prev + 1);
+*   }, 1000);
+*
+*   return (
+*     <div>
+*       <p>{time} seconds</p>
+*     </div>
+*   );
+* }
+*/
+function useInterval(callback, options) {
+	const delay = typeof options === "number" ? options : options.delay;
+	const immediate = typeof options === "number" ? false : options.immediate;
+	const enabled = typeof options === "number" ? true : options.enabled ?? true;
+	const preservedCallback = require_usePreservedCallback.usePreservedCallback(callback);
+	const immediateCalledRef = (0, react.useRef)(false);
+	(0, react.useEffect)(function runImmediateCallback() {
+		if (immediate !== true) {
+			immediateCalledRef.current = false;
+			return;
+		}
+		if (!enabled) return;
+		if (immediateCalledRef.current) return;
+		immediateCalledRef.current = true;
+		preservedCallback();
+	}, [
+		immediate,
+		preservedCallback,
+		enabled
+	]);
+	(0, react.useEffect)(function startInterval() {
+		if (!enabled) return;
+		const id = setInterval(preservedCallback, delay);
+		return () => clearInterval(id);
+	}, [
+		delay,
+		preservedCallback,
+		enabled
+	]);
+}
+//#endregion
+exports.useInterval = useInterval;

package/dist/hooks/useInterval/{index.d.cts → useInterval.d.cts}

@@ -1,7 +1,9 @@
+
+//#region src/hooks/useInterval/useInterval.d.ts
 type IntervalOptions = number | {
-    delay: number;
-    immediate?: boolean;
-    enabled?: boolean;
+  delay: number;
+  immediate?: boolean;
+  enabled?: boolean;
 };
 /**
  * @description
@@ -33,5 +35,5 @@ type IntervalOptions = number | {
  * }
  */
 declare function useInterval(callback: () => void, options: IntervalOptions): void;
-
-export { useInterval };
+//#endregion
+export { useInterval };

package/{esm/hooks/useInterval/index.d.ts → dist/hooks/useInterval/useInterval.d.mts}

@@ -1,7 +1,9 @@
+
+//#region src/hooks/useInterval/useInterval.d.ts
 type IntervalOptions = number | {
-    delay: number;
-    immediate?: boolean;
-    enabled?: boolean;
+  delay: number;
+  immediate?: boolean;
+  enabled?: boolean;
 };
 /**
  * @description
@@ -33,5 +35,5 @@ type IntervalOptions = number | {
  * }
  */
 declare function useInterval(callback: () => void, options: IntervalOptions): void;
-
-export { useInterval };
+//#endregion
+export { useInterval };

package/dist/hooks/useInterval/useInterval.mjs

@@ -0,0 +1,65 @@
+"use client";
+import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallback.mjs";
+import { useEffect, useRef } from "react";
+//#region src/hooks/useInterval/useInterval.ts
+/**
+* @description
+* `useInterval` is a React hook that executes a function at a specified interval.
+* It is useful for timers, polling data, and other recurring tasks.
+*
+* @param {() => void} callback - The function to be executed periodically.
+* @param {number | { delay: number; enabled?: boolean; immediate?: boolean }} options - Configures the interval behavior.
+* @param {number} options.delay - The interval duration in milliseconds. If `null`, the interval will not run.
+* @param {boolean} [options.immediate=false] - If `true`, executes immediately before starting the interval.
+* @param {boolean} [options.enabled=true] - If `false`, the interval will not run.
+*
+* @example
+* import { useInterval } from 'react-simplikit';
+* import { useState } from 'react';
+*
+* function Timer() {
+*   const [time, setTime] = useState(0);
+*
+*   useInterval(() => {
+*     setTime(prev => prev + 1);
+*   }, 1000);
+*
+*   return (
+*     <div>
+*       <p>{time} seconds</p>
+*     </div>
+*   );
+* }
+*/
+function useInterval(callback, options) {
+	const delay = typeof options === "number" ? options : options.delay;
+	const immediate = typeof options === "number" ? false : options.immediate;
+	const enabled = typeof options === "number" ? true : options.enabled ?? true;
+	const preservedCallback = usePreservedCallback(callback);
+	const immediateCalledRef = useRef(false);
+	useEffect(function runImmediateCallback() {
+		if (immediate !== true) {
+			immediateCalledRef.current = false;
+			return;
+		}
+		if (!enabled) return;
+		if (immediateCalledRef.current) return;
+		immediateCalledRef.current = true;
+		preservedCallback();
+	}, [
+		immediate,
+		preservedCallback,
+		enabled
+	]);
+	useEffect(function startInterval() {
+		if (!enabled) return;
+		const id = setInterval(preservedCallback, delay);
+		return () => clearInterval(id);
+	}, [
+		delay,
+		preservedCallback,
+		enabled
+	]);
+}
+//#endregion
+export { useInterval };

package/dist/hooks/useIsClient/useIsClient.cjs

@@ -0,0 +1,49 @@
+"use client";
+let react = require("react");
+//#region src/hooks/useIsClient/useIsClient.ts
+/**
+* @description
+* `useIsClient` is a React hook that returns `true` only in the client-side environment.
+* It is primarily used to differentiate between client-side and server-side rendering (SSR).
+* The state is set to `true` only after the component is mounted in the client-side environment.
+*
+* @returns {boolean} Returns `true` in a client-side environment, and `false` otherwise.
+*
+* @example
+* function ClientSideContent() {
+*   const isClient = useIsClient();
+*
+*   if (!isClient) {
+*     return <div>Loading...</div>; // Rendered on the server side
+*   }
+*
+*   return <div>Client-side rendered content</div>; // Rendered on the client side
+* }
+*
+* @example
+* function ClientOnlyMap() {
+*   const isClient = useIsClient();
+*
+*   if (!isClient) return null;
+*
+*   return <div id="map" />;
+* }
+*
+* @example
+* function ClientTheme() {
+*   const isClient = useIsClient();
+*
+*   const theme = isClient ? localStorage.getItem('theme') : 'light';
+*
+*   return <div>Current theme: {theme}</div>;
+* }
+*/
+function useIsClient() {
+	const [isClient, setIsClient] = (0, react.useState)(false);
+	(0, react.useEffect)(function syncClientState() {
+		setIsClient(true);
+	}, []);
+	return isClient;
+}
+//#endregion
+exports.useIsClient = useIsClient;

package/dist/hooks/useIsClient/{index.d.cts → useIsClient.d.cts}

@@ -1,3 +1,5 @@
+
+//#region src/hooks/useIsClient/useIsClient.d.ts
 /**
  * @description
  * `useIsClient` is a React hook that returns `true` only in the client-side environment.
@@ -36,5 +38,5 @@
  * }
  */
 declare function useIsClient(): boolean;
-
-export { useIsClient };
+//#endregion
+export { useIsClient };

package/{esm/hooks/useIsClient/index.d.ts → dist/hooks/useIsClient/useIsClient.d.mts}

@@ -1,3 +1,5 @@
+
+//#region src/hooks/useIsClient/useIsClient.d.ts
 /**
  * @description
  * `useIsClient` is a React hook that returns `true` only in the client-side environment.
@@ -36,5 +38,5 @@
  * }
  */
 declare function useIsClient(): boolean;
-
-export { useIsClient };
+//#endregion
+export { useIsClient };

package/dist/hooks/useIsClient/useIsClient.mjs

@@ -0,0 +1,49 @@
+"use client";
+import { useEffect, useState } from "react";
+//#region src/hooks/useIsClient/useIsClient.ts
+/**
+* @description
+* `useIsClient` is a React hook that returns `true` only in the client-side environment.
+* It is primarily used to differentiate between client-side and server-side rendering (SSR).
+* The state is set to `true` only after the component is mounted in the client-side environment.
+*
+* @returns {boolean} Returns `true` in a client-side environment, and `false` otherwise.
+*
+* @example
+* function ClientSideContent() {
+*   const isClient = useIsClient();
+*
+*   if (!isClient) {
+*     return <div>Loading...</div>; // Rendered on the server side
+*   }
+*
+*   return <div>Client-side rendered content</div>; // Rendered on the client side
+* }
+*
+* @example
+* function ClientOnlyMap() {
+*   const isClient = useIsClient();
+*
+*   if (!isClient) return null;
+*
+*   return <div id="map" />;
+* }
+*
+* @example
+* function ClientTheme() {
+*   const isClient = useIsClient();
+*
+*   const theme = isClient ? localStorage.getItem('theme') : 'light';
+*
+*   return <div>Current theme: {theme}</div>;
+* }
+*/
+function useIsClient() {
+	const [isClient, setIsClient] = useState(false);
+	useEffect(function syncClientState() {
+		setIsClient(true);
+	}, []);
+	return isClient;
+}
+//#endregion
+export { useIsClient };