@vibehooks/react 0.0.1

package/dist/useTranslator.js

@@ -0,0 +1,119 @@
+import * as React from "react";
+
+//#region src/useTranslator.ts
+/**
+* `useTranslator` is a React custom hook that provides a simple way to translate text using Translator API in Chrome to translate text with AI models provided in the browser.
+*
+* @example
+* ```tsx
+* const {
+*        isSupported,
+*        translate,
+*        checkLanguageSupport,
+*        isLanguagePairSupported,
+*        isTranslating,
+*        translation,
+*        error,
+*    } = useTranslator({
+*        sourceLanguage: "es",
+*        targetLanguage: "en-US",
+*        onLanguageSupportCheck: (supported) => {
+*            console.log("Language pair supported:", supported);
+*        },
+*    });
+*
+*    React.useEffect(() => {
+*    checkLanguageSupport();
+*    }, [checkLanguageSupport]);
+*
+*    const handleTranslate = async () => {
+*    await translate("Hola mundo");
+*    };
+* ```
+* @see https://developer.mozilla.org/en-US/docs/Web/API/Translator
+*/
+function useTranslator(options) {
+	const { onLanguageSupportCheck, sourceLanguage, targetLanguage } = options;
+	const translatorRef = React.useRef(null);
+	const [isSupported, setIsSupported] = React.useState(true);
+	const [isLanguagePairSupported, setIsLanguagePairSupported] = React.useState(null);
+	const [isTranslating, setIsTranslating] = React.useState(false);
+	const [translation, setTranslation] = React.useState(null);
+	const [error, setError] = React.useState(null);
+	React.useEffect(() => {
+		if (typeof window === "undefined" || !window.Translator) {
+			setIsSupported(false);
+			setError(/* @__PURE__ */ new Error("Translator API is not supported in this browser."));
+			return;
+		}
+		setIsSupported(true);
+	}, []);
+	const checkLanguageSupport = React.useCallback(async () => {
+		if (!window.Translator) {
+			const error$1 = /* @__PURE__ */ new Error("Translator API is not supported in this browser.");
+			setError(error$1);
+			throw error$1;
+		}
+		try {
+			const supported = await window.Translator.availability({
+				sourceLanguage,
+				targetLanguage
+			}) === "available";
+			setIsLanguagePairSupported(supported);
+			onLanguageSupportCheck?.(supported);
+			return supported;
+		} catch (err) {
+			const error$1 = err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to check language support.");
+			setError(error$1);
+			throw error$1;
+		}
+	}, [
+		sourceLanguage,
+		targetLanguage,
+		onLanguageSupportCheck
+	]);
+	const ensureTranslator = React.useCallback(async () => {
+		if (translatorRef.current) return translatorRef.current;
+		if (!window.Translator) throw new Error("Translator API is not supported in this browser.");
+		const translator = await window.Translator.create({
+			sourceLanguage,
+			targetLanguage
+		});
+		translatorRef.current = translator;
+		return translator;
+	}, [sourceLanguage, targetLanguage]);
+	const translate = React.useCallback(async (text) => {
+		setIsTranslating(true);
+		setError(null);
+		try {
+			if (isLanguagePairSupported === false) throw new Error("The selected language pair is not supported.");
+			const result = await (await ensureTranslator()).translate(text);
+			setTranslation(result);
+			return result;
+		} catch (err) {
+			const error$1 = err instanceof Error ? err : /* @__PURE__ */ new Error("Failed to translate text.");
+			setError(error$1);
+			throw error$1;
+		} finally {
+			setIsTranslating(false);
+		}
+	}, [isLanguagePairSupported, ensureTranslator]);
+	React.useEffect(() => {
+		return () => {
+			translatorRef.current?.destroy();
+			translatorRef.current = null;
+		};
+	}, []);
+	return {
+		checkLanguageSupport,
+		error,
+		isLanguagePairSupported,
+		isSupported,
+		isTranslating,
+		translate,
+		translation
+	};
+}
+
+//#endregion
+export { useTranslator };

package/dist/useUserActivation.d.ts

@@ -0,0 +1,40 @@
+//#region src/useUserActivation.d.ts
+interface UseUserActivationReturn {
+  /**
+   * Whether the user has ever interacted with the document.
+   */
+  hasBeenActive: boolean;
+  /**
+   * Whether there is a current transient user activation.
+   */
+  isActive: boolean;
+  /**
+   * Indicates whether the UserActivation API is supported.
+   */
+  isSupported: boolean;
+  /**
+   * Forces a re-read of the current activation state.
+   */
+  refresh: () => void;
+}
+/**
+ * `useUserActivation` is a React hook that exposes the browser User Activation State.
+ * This hook provides read-only access to `navigator.userActivation` allowing consumers to react to transient and persistent user activation without imposing side effects or control flow.
+ *
+ * @example
+ * ```tsx
+ * const { isActive, hasBeenActive } = useUserActivation();
+ *
+ * if (!hasBeenActive) {
+ *   return <p>Please interact with the page.</p>;
+ * }
+ *
+ * if (isActive) {
+ *   runSensitiveAction();
+ * }
+ * ```
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/UserActivation
+ */
+declare function useUserActivation(): UseUserActivationReturn;
+//#endregion
+export { useUserActivation };

package/dist/useUserActivation.js

@@ -0,0 +1,63 @@
+import * as React from "react";
+
+//#region src/useUserActivation.ts
+/**
+* `useUserActivation` is a React hook that exposes the browser User Activation State.
+* This hook provides read-only access to `navigator.userActivation` allowing consumers to react to transient and persistent user activation without imposing side effects or control flow.
+*
+* @example
+* ```tsx
+* const { isActive, hasBeenActive } = useUserActivation();
+*
+* if (!hasBeenActive) {
+*   return <p>Please interact with the page.</p>;
+* }
+*
+* if (isActive) {
+*   runSensitiveAction();
+* }
+* ```
+* @see https://developer.mozilla.org/en-US/docs/Web/API/UserActivation
+*/
+function useUserActivation() {
+	const isSupported = typeof navigator !== "undefined" && typeof navigator.userActivation !== "undefined";
+	const readState = React.useCallback(() => {
+		if (!isSupported) return {
+			hasBeenActive: false,
+			isActive: false
+		};
+		return {
+			hasBeenActive: navigator.userActivation.hasBeenActive,
+			isActive: navigator.userActivation.isActive
+		};
+	}, [isSupported]);
+	const [state, setState] = React.useState(() => readState());
+	const refresh = React.useCallback(() => {
+		setState(readState());
+	}, [readState]);
+	React.useEffect(() => {
+		if (!isSupported) return;
+		const events = [
+			"mousedown",
+			"keydown",
+			"touchstart",
+			"pointerdown"
+		];
+		const handler = () => {
+			refresh();
+		};
+		events.forEach((event) => window.addEventListener(event, handler, { passive: true }));
+		return () => {
+			events.forEach((event) => window.removeEventListener(event, handler));
+		};
+	}, [isSupported, refresh]);
+	return {
+		hasBeenActive: state.hasBeenActive,
+		isActive: state.isActive,
+		isSupported,
+		refresh
+	};
+}
+
+//#endregion
+export { useUserActivation };

package/dist/useVibration.d.ts

@@ -0,0 +1,55 @@
+//#region src/useVibration.d.ts
+/**
+ * Pattern accepted by the Vibration API.
+ * A single duration in milliseconds or a vibration pattern array.
+ */
+type VibrationPattern = number | number[];
+interface UseVibrationReturn {
+  /**
+   * Cancels any ongoing vibration.
+   * During SSR or when unsupported, does nothing.
+   */
+  cancel: () => void;
+  /**
+   * Indicates whether the Vibration API is supported in the current execution environment.
+   */
+  isSupported: boolean;
+  /**
+   * Triggers a vibration with the given pattern.
+   * Returns `true` if the vibration request was accepted by the user agent, or `false` otherwise.
+   * Durring SSR or when unsupported, returns `false`.
+   */
+  vibrate: (pattern: VibrationPattern) => boolean;
+}
+/**
+ * `useVibration` is a React hook to safely access the Vibration API in an unopinionated and SSR-safe manner.
+ *
+ * @example
+ * ```tsx
+ * function Example() {
+ *   const { isSupported, vibrate, cancel } = useVibration();
+ *
+ *   if (!isSupported) {
+ *     return <button disabled>Vibration not supported</button>;
+ *   }
+ *
+ *   return (
+ *     <>
+ *       <button onClick={() => vibrate(200)}>
+ *         Vibrate once
+ *       </button>
+ *       <button onClick={() => vibrate([100, 50, 100])}>
+ *         Vibrate pattern
+ *       </button>
+ *       <button onClick={cancel}>
+ *         Stop vibration
+ *       </button>
+ *     </>
+ *   );
+ * }
+ * ```
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API
+ */
+declare function useVibration(): UseVibrationReturn;
+//#endregion
+export { useVibration };

package/dist/useVibration.js

@@ -0,0 +1,50 @@
+import * as React from "react";
+
+//#region src/useVibration.ts
+/**
+* `useVibration` is a React hook to safely access the Vibration API in an unopinionated and SSR-safe manner.
+*
+* @example
+* ```tsx
+* function Example() {
+*   const { isSupported, vibrate, cancel } = useVibration();
+*
+*   if (!isSupported) {
+*     return <button disabled>Vibration not supported</button>;
+*   }
+*
+*   return (
+*     <>
+*       <button onClick={() => vibrate(200)}>
+*         Vibrate once
+*       </button>
+*       <button onClick={() => vibrate([100, 50, 100])}>
+*         Vibrate pattern
+*       </button>
+*       <button onClick={cancel}>
+*         Stop vibration
+*       </button>
+*     </>
+*   );
+* }
+* ```
+* @see https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API
+*/
+function useVibration() {
+	const isSupported = typeof window !== "undefined" && typeof navigator !== "undefined" && typeof navigator.vibrate === "function";
+	const vibrate = React.useCallback((pattern) => {
+		if (!isSupported) return false;
+		return navigator.vibrate(pattern);
+	}, [isSupported]);
+	return {
+		cancel: React.useCallback(() => {
+			if (!isSupported) return;
+			navigator.vibrate(0);
+		}, [isSupported]),
+		isSupported,
+		vibrate
+	};
+}
+
+//#endregion
+export { useVibration };

package/dist/useWebsocket.d.ts

@@ -0,0 +1,80 @@
+//#region src/useWebsocket.d.ts
+interface UseWebsocketOptions<TMessage = unknown> {
+  /**
+   * Should the socket auto-connect inmediately (default: true)
+   */
+  autoConnect?: boolean;
+  /**
+   * Max number of reconnection attempts (default: Infinity)
+   */
+  maxRetries?: number;
+  /**
+   * Called when the socket closes unexpectedly
+   */
+  onClose?: (event: CloseEvent) => void;
+  /**
+   * Called when an error occurs
+   */
+  onError?: (event: Event) => void;
+  /**
+   * Called when a message is received
+   */
+  onMessage?: (message: TMessage) => void;
+  /**
+   * Reconnection interval in milliseconds (default: 3000)
+   */
+  reconnectionInterval?: number;
+  /**
+   * Websocket url
+   */
+  url: string;
+}
+interface UseWebsocketReturn<TMessage = unknown> {
+  /**
+   * Manually reconnect the Websocket
+   */
+  connect: () => void;
+  /**
+   * Manually disconnect the Websocket
+   */
+  disconnect: () => void;
+  /**
+   * Show any errors
+   */
+  error: Error | null;
+  /**
+   * Connection status
+   */
+  isConnected: boolean;
+  /**
+   * Latest received message
+   */
+  message: TMessage | null;
+  /**
+   * Messages
+   */
+  messages: TMessage[];
+  /**
+   * Send a message via Websocket
+   */
+  send: (data: string | ArrayBuffer | Blob | ArrayBufferView) => void;
+}
+/**
+ * `useWebsocket` is a React hook to manage Websocket connections with auto-reconnect, error handling, and SSR safety.
+ *
+ * @example
+ * ```tsx
+ * const { socket, message, isConnected, send } = useWebsocket<{ text: string }>({
+ *   url: 'wss://example.com/socket',
+ *   onMessage: (msg) => console.log(msg),
+ * });
+ *
+ * React.useEffect(() => {
+ *   if (isConnected) send(JSON.stringify({ hello: 'world' }));
+ * }, [isConnected]);
+ * ```
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API
+ */
+declare function useWebsocket<TMessage = unknown>(options: UseWebsocketOptions<TMessage>): UseWebsocketReturn<TMessage>;
+//#endregion
+export { useWebsocket };

package/dist/useWebsocket.js

@@ -0,0 +1,125 @@
+import * as React from "react";
+
+//#region src/useWebsocket.ts
+/**
+* `useWebsocket` is a React hook to manage Websocket connections with auto-reconnect, error handling, and SSR safety.
+*
+* @example
+* ```tsx
+* const { socket, message, isConnected, send } = useWebsocket<{ text: string }>({
+*   url: 'wss://example.com/socket',
+*   onMessage: (msg) => console.log(msg),
+* });
+*
+* React.useEffect(() => {
+*   if (isConnected) send(JSON.stringify({ hello: 'world' }));
+* }, [isConnected]);
+* ```
+* @see https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API
+*/
+function useWebsocket(options) {
+	const { autoConnect = true, maxRetries = Infinity, onClose, onError, onMessage, reconnectionInterval = 3e3, url } = options;
+	const [message, setMessage] = React.useState(null);
+	const [messages, setMessages] = React.useState([]);
+	const [isConnected, setIsConnected] = React.useState(false);
+	const [error, setError] = React.useState(null);
+	const socketRef = React.useRef(null);
+	const retriesRef = React.useRef(0);
+	const reconnectTimeoutRef = React.useRef(null);
+	const manualCloseRef = React.useRef(false);
+	const hasOpenedRef = React.useRef(false);
+	const onMessageRef = React.useRef(onMessage);
+	const onCloseRef = React.useRef(onClose);
+	const onErrorRef = React.useRef(onError);
+	React.useEffect(() => {
+		onMessageRef.current = onMessage;
+		onCloseRef.current = onClose;
+		onErrorRef.current = onError;
+	}, [
+		onMessage,
+		onClose,
+		onError
+	]);
+	const connect = React.useCallback(() => {
+		if (typeof window === "undefined") return;
+		manualCloseRef.current = false;
+		hasOpenedRef.current = false;
+		const ws = new WebSocket(url);
+		socketRef.current = ws;
+		ws.onopen = () => {
+			hasOpenedRef.current = true;
+			setIsConnected(true);
+			setError(null);
+			retriesRef.current = 0;
+		};
+		ws.onmessage = (event) => {
+			let data;
+			try {
+				data = JSON.parse(event.data);
+			} catch {
+				data = event.data;
+			}
+			setMessage(data);
+			setMessages((prev) => [...prev, data]);
+			onMessageRef.current?.(data);
+		};
+		ws.onclose = (event) => {
+			setIsConnected(false);
+			onCloseRef.current?.(event);
+			if (hasOpenedRef.current && !manualCloseRef.current && retriesRef.current < maxRetries) {
+				retriesRef.current += 1;
+				reconnectTimeoutRef.current = setTimeout(connect, reconnectionInterval);
+			}
+		};
+		ws.onerror = (event) => {
+			setError((prev) => prev ?? /* @__PURE__ */ new Error("WebSocket error"));
+			onErrorRef.current?.(event);
+		};
+	}, [
+		url,
+		reconnectionInterval,
+		maxRetries
+	]);
+	const disconnect = React.useCallback(() => {
+		manualCloseRef.current = true;
+		if (socketRef.current) {
+			socketRef.current.close();
+			socketRef.current = null;
+		}
+		if (reconnectTimeoutRef.current) clearTimeout(reconnectTimeoutRef.current);
+	}, []);
+	const reconnect = React.useCallback(() => {
+		disconnect();
+		connect();
+	}, [disconnect, connect]);
+	React.useEffect(() => {
+		if (!autoConnect) return;
+		connect();
+		return () => {
+			disconnect();
+		};
+	}, [
+		autoConnect,
+		connect,
+		disconnect
+	]);
+	return {
+		connect: reconnect,
+		disconnect,
+		error,
+		isConnected,
+		message,
+		messages,
+		send: React.useCallback((data) => {
+			const socket = socketRef.current;
+			if (!socket || socket.readyState !== WebSocket.OPEN) {
+				setError(/* @__PURE__ */ new Error("WebSocket is not connected. Message not sent."));
+				return;
+			}
+			socket.send(data);
+		}, [])
+	};
+}
+
+//#endregion
+export { useWebsocket };

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@vibehooks/react",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "Modern React and Next.js hooks, unopinionated and focused on developer experience.",
+  "author": "Sebastian Marat Urdanegui Bisalaya <sebasurdanegui@gmail.com>",
+  "license": "MIT",
+  "homepage": "https://vibehooks.sebastianurdanegui.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SebastianUrdaneguiBisalaya/vibehooks.git"
+  },
+  "bugs": {
+    "url": "https://github.com/SebastianUrdaneguiBisalaya/vibehooks/issues"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "lint-staged": {
+    "*.{js,ts,tsx,mdx}": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^20.4.1",
+    "@commitlint/config-conventional": "^20.4.1",
+    "@eslint/js": "^9.39.2",
+    "@tsconfig/strictest": "^2.0.8",
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "bumpp": "^10.3.2",
+    "eslint": "^9.39.2",
+    "eslint-plugin-perfectionist": "^5.4.0",
+    "eslint-plugin-react": "^7.37.5",
+    "globals": "^17.0.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "prettier": "3.7.4",
+    "tsdown": "^0.18.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.53.1"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsc --noEmit",
+    "release": "bumpp && pnpm publish",
+    "prettier-check": "prettier --check .",
+    "prettier-fix": "prettier --write .",
+    "lint": "eslint .",
+    "lint-fix": "eslint . --fix"
+  }
+}