{ "name": "preact-missing-hooks", "version": "4.6.0", "description": "A lightweight, extendable collection of missing React-like hooks for Preact — plus fresh, powerful new ones designed specifically for modern Preact apps.", "exports": { "useTransition": { "type": "function", "description": "React hook that provides a transition state to coordinate updates that may be delayed, allowing components to render fallback UI while waiting.", "hook": true, "params": "config?: { timeoutMs?: number }", "returns": "[isPending: boolean, startTransition: (callback: () => void) => void]" }, "useMutationObserver": { "type": "function", "description": "React hook that observes DOM mutations on a target element, invoking a callback when mutations occur.", "hook": true, "params": "target: Element | null, callback: (mutations: MutationRecord[]) => void, options?: MutationObserverInit" }, "useEventBus": { "type": "function", "description": "React hook that provides access to a shared event bus for pub/sub communication between components.", "hook": true, "params": "none", "returns": "{ emit: (event: string, data?: any) => void, on: (event: string, handler: (data?: any) => void) => void, off: (event: string, handler: (data?: any) => void) => void }" }, "useWrappedChildren": { "type": "function", "description": "React hook that wraps child components with additional props or context, useful for injecting shared data.", "hook": true, "params": "children: ReactNode, wrapperProps?: object", "returns": "ReactNode" }, "usePreferredTheme": { "type": "function", "description": "React hook that detects and returns the user's preferred color scheme (light/dark) from system or media query.", "hook": true, "params": "none", "returns": "'light' | 'dark' | 'no-preference'" }, "useNetworkState": { "type": "function", "description": "React hook that returns the current network connection status (online/offline) and connectivity details.", "hook": true, "params": "none", "returns": "{ online: boolean, since?: Date, type?: string, effectiveType?: string, downlink?: number, rtt?: number }" }, "useClipboard": { "type": "function", "description": "React hook that provides access to the system clipboard for reading and writing text content.", "hook": true, "params": "none", "returns": "{ text: string | null, write: (text: string) => Promise }" }, "useRageClick": { "type": "function", "description": "React hook that detects rapid repeated clicks on an element, useful for triggering special actions or preventing accidental triggers.", "hook": true, "params": "onClick: (event: MouseEvent) => void, threshold?: number", "returns": "void" }, "useThreadedWorker": { "type": "function", "description": "Creates a Web Worker from a script or function and provides a thread-safe interface to run tasks in parallel. Ideal for CPU-intensive operations that should not block the UI thread.", "hook": true, "params": "workerSource: string | Function, options?: { autoTerminate?: boolean }", "returns": "{ run: (data: any) => Promise, terminate: () => void }", "sideEffect": false, "example": "const { run, terminate } = useThreadedWorker(workerScript); run({ data }).then(result => console.log(result));" }, "useIndexedDB": { "type": "function", "description": "Provides a reactive interface to IndexedDB for storing and retrieving structured data in the browser. Useful for offline-first apps or caching large datasets beyond localStorage limits.", "hook": true, "params": "dbName: string, storeName: string, options?: { version?: number }", "returns": "{ get: (key: string) => Promise, set: (key: string, value: any) => Promise, delete: (key: string) => Promise, clear: () => Promise }", "sideEffect": false, "example": "const { get, set } = useIndexedDB('myApp', 'users'); set('user1', userData); const user = await get('user1');" }, "useWebRTCIP": { "type": "function", "description": "Detects the local IP address of the client using WebRTC without establishing a peer connection. Helpful for network-aware applications or WebRTC debugging.", "hook": true, "params": "none", "returns": "Promise", "sideEffect": false, "example": "const ips = await useWebRTCIP(); console.log('Local IPs:', ips);" }, "useWasmCompute": { "type": "function", "description": "Loads and runs WebAssembly modules for high-performance computations in the browser. Best for heavy numeric processing or cryptographic operations where JavaScript is too slow.", "hook": true, "params": "wasmModule: ArrayBuffer | string, importObject?: object", "returns": "{ run: (method: string, ...args: any[]) => any, free: () => void }", "sideEffect": false, "example": "const { run } = useWasmCompute(wasmBytes); const result = run('computeHash', input);" }, "useWorkerNotifications": { "type": "function", "description": "Registers a service worker and manages push notifications with permission handling. Useful for real-time updates or background messaging in progressive web apps.", "hook": true, "params": "swUrl: string, options?: { permission?: 'default' | 'granted' | 'denied' }", "returns": "{ subscribe: () => Promise, unsubscribe: () => Promise, isSubscribed: boolean }", "sideEffect": false, "example": "const { subscribe } = useWorkerNotifications('/sw.js'); await subscribe();" }, "useRefPrint": { "type": "function", "description": "Provides a reference to a DOM element and a method to print its contents. Useful for printing specific sections of a page without affecting the entire document.", "hook": true, "params": "none", "returns": "{ ref: React.RefObject, print: () => void }", "sideEffect": false, "example": "const { ref, print } = useRefPrint(); return
Content to print
;" }, "useRBAC": { "type": "function", "description": "Manages role-based access control by checking user permissions against defined roles. Ideal for securing components or routes based on user authorization levels.", "hook": true, "params": "userRoles: string[], permissions: { [role: string]: string[] }", "returns": "{ hasPermission: (action: string) => boolean, roles: string[] }", "sideEffect": false, "example": "const { hasPermission } = useRBAC(user.roles, permissionMap); if (hasPermission('edit')) { /* show edit button */ }" }, "usePrefetch": { "type": "function", "description": "Prefetches resources like scripts, styles, or API data to improve perceived performance. Best for predictive loading when user is likely to navigate to a specific route.", "hook": true, "params": "resources: string[] | { [key: string]: string }", "returns": "{ loading: boolean, error: Error | null }", "sideEffect": false, "example": "const { loading } = usePrefetch(['/api/data', '/static/style.css']); if (loading) { /* show spinner */ }" } }, "hooks": [ "useTransition", "useMutationObserver", "useEventBus", "useWrappedChildren", "usePreferredTheme", "useNetworkState", "useClipboard", "useRageClick", "useThreadedWorker", "useIndexedDB", "useWebRTCIP", "useWasmCompute", "useWorkerNotifications", "useRefPrint", "useRBAC", "usePrefetch" ], "frameworks": [ "preact", "react" ], "generatedBy": "hayagriva-llm@1.2.0", "mode": "ai", "summary": "Preact-Missing-Hooks is a lightweight, extendable collection of missing React-like hooks for Preact — plus fresh, powerful new ones designed specifically for modern Preact apps. It bridges the gap between Preact and React's hook ecosystem while adding innovative hooks for advanced web features like WebRTC, WebAssembly, IndexedDB, and more.", "sideEffects": [ "reads process.env", "modifies DOM" ], "keywords": [ "preact", "hooks", "react-hooks", "useTransition", "useMutationObserver", "useEventBus", "useWrappedChildren", "usePreferredTheme", "useNetworkState", "useClipboard", "useRageClick", "useThreadedWorker", "useIndexedDB", "useWebRTCIP", "useWasmCompute", "useWorkerNotifications", "useLLMMetadata", "useRefPrint", "useRBAC", "usePrefetch", "typescript", "modern-web", "web-development", "frontend", "ui-components" ], "whenToUse": "Choose Preact-Missing-Hooks when building modern Preact applications that need advanced, React-like hooks not natively available in Preact, or when you want to leverage powerful new hooks for tasks like clipboard management, WebRTC IP detection, WebAssembly computation, IndexedDB access, or rage-click detection. It's ideal for developers seeking a lightweight, extendable hook library that works seamlessly with both Preact and React, especially when building feature-rich applications requiring modern browser APIs and advanced state management.", "reasonToUse": [ "Provides missing React-like hooks for Preact", "Offers powerful new hooks for modern web features", "Lightweight and extendable", "Framework-agnostic (works with Preact and React)", "Production-ready with TypeScript support", "Includes advanced hooks for WebRTC, WebAssembly, IndexedDB, and more", "Helps detect user frustration with rage-click detection", "Provides network state monitoring and theme detection hooks" ], "useCases": [ "Building a Preact app that needs React's useTransition functionality", "Managing clipboard operations in a Preact component", "Detecting user rage clicks and reporting to error tracking tools", "Running WebAssembly computations in a Web Worker", "Accessing IndexedDB with a clean, React-like hook API", "Observing DOM mutations reactively", "Wrapping children components to inject additional props", "Detecting user's preferred theme for dark/light mode support", "Monitoring network state changes for offline/online handling", "Tracking worker notifications and task execution in real-time", "Retrieving local WebRTC IP addresses for signaling or diagnostics" ], "documentation": "See README", "relatedPackages": [ "preact", "react", "react-hooks", "preact/hooks", "preact/compat" ] }