preact-missing-hooks/llm.package.txt

A lightweight, extendable collection of missing React-like hooks for Preact — plus fresh, powerful new ones designed specifically for modern Preact apps.

Package: 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.

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.

When to use:
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.

Reason to use:
- 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

Use cases:
- 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

Side effects:
- 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


Documentation:
See README

Related packages:
preact, react, react-hooks, preact/hooks, preact/compat

Exports:
- useClipboard (Hook) : React hook that provides access to the system clipboard for reading and writing text content. — params: none — returns: { text: string | null, write: (text: string) => Promise<void> }
- useEventBus (Hook) : React hook that provides access to a shared event bus for pub/sub communication between components. — 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 }
- useIndexedDB (Hook) : 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. — params: dbName: string, storeName: string, options?: { version?: number } — returns: { get: (key: string) => Promise<any>, set: (key: string, value: any) => Promise<void>, delete: (key: string) => Promise<void>, clear: () => Promise<void> } — e.g. const { get, set } = useIndexedDB('myApp', 'users'); set('user1', userData); const user = await get('user1');
- useMutationObserver (Hook) : React hook that observes DOM mutations on a target element, invoking a callback when mutations occur. — params: target: Element | null, callback: (mutations: MutationRecord[]) => void, options?: MutationObserverInit
- useNetworkState (Hook) : React hook that returns the current network connection status (online/offline) and connectivity details. — params: none — returns: { online: boolean, since?: Date, type?: string, effectiveType?: string, downlink?: number, rtt?: number }
- usePreferredTheme (Hook) : React hook that detects and returns the user's preferred color scheme (light/dark) from system or media query. — params: none — returns: 'light' | 'dark' | 'no-preference'
- usePrefetch (Hook) : 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. — params: resources: string[] | { [key: string]: string } — returns: { loading: boolean, error: Error | null } — e.g. const { loading } = usePrefetch(['/api/data', '/static/style.css']); if (loading) { /* show spinner */ }
- useRageClick (Hook) : React hook that detects rapid repeated clicks on an element, useful for triggering special actions or preventing accidental triggers. — params: onClick: (event: MouseEvent) => void, threshold?: number — returns: void
- useRBAC (Hook) : Manages role-based access control by checking user permissions against defined roles. Ideal for securing components or routes based on user authorization levels. — params: userRoles: string[], permissions: { [role: string]: string[] } — returns: { hasPermission: (action: string) => boolean, roles: string[] } — e.g. const { hasPermission } = useRBAC(user.roles, permissionMap); if (hasPermission('edit')) { /* show edit button */ }
- useRefPrint (Hook) : 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. — params: none — returns: { ref: React.RefObject<any>, print: () => void } — e.g. const { ref, print } = useRefPrint(); return <div ref={ref}>Content to print</div>;
- useThreadedWorker (Hook) : 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. — params: workerSource: string | Function, options?: { autoTerminate?: boolean } — returns: { run: (data: any) => Promise<any>, terminate: () => void } — e.g. const { run, terminate } = useThreadedWorker(workerScript); run({ data }).then(result => console.log(result));
- useTransition (Hook) : React hook that provides a transition state to coordinate updates that may be delayed, allowing components to render fallback UI while waiting. — params: config?: { timeoutMs?: number } — returns: [isPending: boolean, startTransition: (callback: () => void) => void]
- useWasmCompute (Hook) : 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. — params: wasmModule: ArrayBuffer | string, importObject?: object — returns: { run: (method: string, ...args: any[]) => any, free: () => void } — e.g. const { run } = useWasmCompute(wasmBytes); const result = run('computeHash', input);
- useWebRTCIP (Hook) : Detects the local IP address of the client using WebRTC without establishing a peer connection. Helpful for network-aware applications or WebRTC debugging. — params: none — returns: Promise<string[]> — e.g. const ips = await useWebRTCIP(); console.log('Local IPs:', ips);
- useWorkerNotifications (Hook) : Registers a service worker and manages push notifications with permission handling. Useful for real-time updates or background messaging in progressive web apps. — params: swUrl: string, options?: { permission?: 'default' | 'granted' | 'denied' } — returns: { subscribe: () => Promise<boolean>, unsubscribe: () => Promise<void>, isSubscribed: boolean } — e.g. const { subscribe } = useWorkerNotifications('/sw.js'); await subscribe();
- useWrappedChildren (Hook) : React hook that wraps child components with additional props or context, useful for injecting shared data. — params: children: ReactNode, wrapperProps?: object — returns: ReactNode

Hooks:
- useTransition
- useMutationObserver
- useEventBus
- useWrappedChildren
- usePreferredTheme
- useNetworkState
- useClipboard
- useRageClick
- useThreadedWorker
- useIndexedDB
- useWebRTCIP
- useWasmCompute
- useWorkerNotifications
- useRefPrint
- useRBAC
- usePrefetch

Frameworks:
preact, react