@-reddacted-/react-hooks 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { useFullscreen } from "./useFullscreen";
+export { useInstallPrompt } from "./useInstallPrompt";
+export type { UseInstallPromptOptions } from "./useInstallPrompt";
+export { useValueChange } from "./useValueChange";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,YAAY,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { useFullscreen } from "./useFullscreen";
+export { useInstallPrompt } from "./useInstallPrompt";
+export { useValueChange } from "./useValueChange";

package/dist/useFullscreen.d.ts

@@ -0,0 +1,7 @@
+export declare function useFullscreen(): {
+    isFullscreen: boolean;
+    enter: (el?: HTMLElement | null) => Promise<void>;
+    exit: () => Promise<void>;
+    toggle: (el?: HTMLElement | null) => void;
+};
+//# sourceMappingURL=useFullscreen.d.ts.map

package/dist/useFullscreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFullscreen.d.ts","sourceRoot":"","sources":["../src/useFullscreen.ts"],"names":[],"mappings":"AAEA,wBAAgB,aAAa;;iBAIW,WAAW,GAAG,IAAI;;kBAoBhD,WAAW,GAAG,IAAI;EAkB3B"}

package/dist/useFullscreen.js

@@ -0,0 +1,42 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+export function useFullscreen() {
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const targetRef = useRef(null);
+    const enter = useCallback(async (el) => {
+        const target = el ?? document.documentElement;
+        targetRef.current = target;
+        try {
+            if (target.requestFullscreen) {
+                await target.requestFullscreen();
+            }
+            else {
+                const webkitEl = target;
+                await webkitEl.webkitRequestFullscreen?.();
+            }
+        }
+        catch { /* browser may deny fullscreen */ }
+    }, []);
+    const exit = useCallback(async () => {
+        try {
+            if (document.fullscreenElement)
+                await document.exitFullscreen();
+        }
+        catch { /* browser may deny exit */ }
+    }, []);
+    const toggle = useCallback((el) => {
+        if (isFullscreen)
+            exit();
+        else
+            enter(el);
+    }, [isFullscreen, enter, exit]);
+    useEffect(() => {
+        const handler = () => setIsFullscreen(!!document.fullscreenElement);
+        document.addEventListener("fullscreenchange", handler);
+        document.addEventListener("webkitfullscreenchange", handler);
+        return () => {
+            document.removeEventListener("fullscreenchange", handler);
+            document.removeEventListener("webkitfullscreenchange", handler);
+        };
+    }, []);
+    return { isFullscreen, enter, exit, toggle };
+}

package/dist/useInstallPrompt.d.ts

@@ -0,0 +1,13 @@
+export interface UseInstallPromptOptions {
+    /** localStorage key used to track dismissal (default: "pwa-install-dismissed") */
+    storageKey?: string;
+    /** How long a dismissal is remembered in ms (default: 30 days) */
+    dismissTtlMs?: number;
+}
+export declare function useInstallPrompt(options?: UseInstallPromptOptions): {
+    showBanner: boolean;
+    isIOS: boolean;
+    install: () => Promise<void>;
+    dismiss: () => void;
+};
+//# sourceMappingURL=useInstallPrompt.d.ts.map

package/dist/useInstallPrompt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInstallPrompt.d.ts","sourceRoot":"","sources":["../src/useInstallPrompt.ts"],"names":[],"mappings":"AAiBA,MAAM,WAAW,uBAAuB;IACtC,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,wBAAgB,gBAAgB,CAAC,OAAO,CAAC,EAAE,uBAAuB;;;;;EAiDjE"}

package/dist/useInstallPrompt.js

@@ -0,0 +1,59 @@
+import { useState, useEffect } from "react";
+const DEFAULT_STORAGE_KEY = "pwa-install-dismissed";
+const DEFAULT_TTL_MS = 30 * 24 * 60 * 60 * 1000;
+function isStandalone() {
+    if (navigator.standalone === true)
+        return true;
+    if (window.matchMedia("(display-mode: standalone)").matches)
+        return true;
+    if (window.matchMedia("(display-mode: fullscreen)").matches)
+        return true;
+    return false;
+}
+export function useInstallPrompt(options) {
+    const storageKey = options?.storageKey ?? DEFAULT_STORAGE_KEY;
+    const dismissTtlMs = options?.dismissTtlMs ?? DEFAULT_TTL_MS;
+    const [deferredPrompt, setDeferredPrompt] = useState(null);
+    const [showBanner, setShowBanner] = useState(false);
+    const [isIOS, setIsIOS] = useState(false);
+    useEffect(() => {
+        const isDismissed = () => {
+            const raw = localStorage.getItem(storageKey);
+            if (!raw)
+                return false;
+            const ts = parseInt(raw, 10);
+            if (isNaN(ts))
+                return false;
+            return Date.now() - ts < dismissTtlMs;
+        };
+        if (isStandalone() || isDismissed())
+            return;
+        const ios = /iPad|iPhone|iPod/.test(navigator.userAgent);
+        if (ios) {
+            setIsIOS(true);
+            setShowBanner(true);
+            return;
+        }
+        const handler = (e) => {
+            e.preventDefault();
+            setDeferredPrompt(e);
+            setShowBanner(true);
+        };
+        window.addEventListener("beforeinstallprompt", handler);
+        return () => window.removeEventListener("beforeinstallprompt", handler);
+    }, [storageKey, dismissTtlMs]);
+    const install = async () => {
+        if (!deferredPrompt)
+            return;
+        await deferredPrompt.prompt();
+        const { outcome } = await deferredPrompt.userChoice;
+        if (outcome === "accepted")
+            setShowBanner(false);
+        setDeferredPrompt(null);
+    };
+    const dismiss = () => {
+        localStorage.setItem(storageKey, String(Date.now()));
+        setShowBanner(false);
+    };
+    return { showBanner, isIOS, install, dismiss };
+}

package/dist/useValueChange.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns true for ~600ms whenever `value` changes between fetches.
+ * @param animationsEnabled Pass false to disable (e.g. from user preferences or prefers-reduced-motion)
+ */
+export declare function useValueChange(value: string, fetchedAt: number | null, animationsEnabled?: boolean): boolean;
+//# sourceMappingURL=useValueChange.d.ts.map

package/dist/useValueChange.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useValueChange.d.ts","sourceRoot":"","sources":["../src/useValueChange.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,MAAM,GAAG,IAAI,EACxB,iBAAiB,UAAO,GACvB,OAAO,CAwBT"}

package/dist/useValueChange.js

@@ -0,0 +1,28 @@
+import { useRef, useState, useEffect } from "react";
+/**
+ * Returns true for ~600ms whenever `value` changes between fetches.
+ * @param animationsEnabled Pass false to disable (e.g. from user preferences or prefers-reduced-motion)
+ */
+export function useValueChange(value, fetchedAt, animationsEnabled = true) {
+    const prevValueRef = useRef(undefined);
+    const [changed, setChanged] = useState(false);
+    const timerRef = useRef(null);
+    useEffect(() => {
+        if (!animationsEnabled || fetchedAt === null)
+            return;
+        if (prevValueRef.current === undefined) {
+            prevValueRef.current = value;
+            return;
+        }
+        if (value !== prevValueRef.current) {
+            prevValueRef.current = value;
+            setChanged(true);
+            if (timerRef.current)
+                clearTimeout(timerRef.current);
+            timerRef.current = setTimeout(() => setChanged(false), 600);
+        }
+    }, [fetchedAt]); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => () => { if (timerRef.current)
+        clearTimeout(timerRef.current); }, []);
+    return changed && animationsEnabled;
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@-reddacted-/react-hooks",
+  "version": "0.1.0",
+  "description": "useFullscreen, useInstallPrompt, useValueChange React hooks",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsc"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "typescript": "~5.8.3"
+  }
+}