Installation

You can install the package with the following command:

Using npm:

npm install @vibehooks/react

Using pnpm:

pnpm add @vibehooks/react

That package is fully typed with TypeScript and comes with all the types you need. You can use the types just by importing them from the package like this:

import { useToggle, type UseToggleReturn } from '@vibehooks/react';

Contributing

Contributions are always welcome!

See Contributing for ways to get started.

If you do not want create your custom hook, you can also contribute to the package by mentioning the name and purpose of the hook you would like to see in this package in the issues section.

API Docs

| Hook | Description | | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | useAsyncState | A robust React hook for managing asynchronous operations and remote data fetching with integrated state tracking and retry logic. | | useAudio | A React hook providing a declarative and unopinionated interface to manage the HTML5 Audio API lifecycle. | | useAutoScroll | A custom hook that automatically manages scrolling to the bottom of a container while respecting manual user navigation. | | useBarcode | A React hook that provides a high-level interface for detecting barcodes and QR codes in real-time using the browser's Barcode Detection API. | | useBatteryStatus | A hardware-integration hook that provides real-time access to the system's battery levels, charging state, and timing estimates. | | useBodyScrollFreeze | An imperative hook to disable body scrolling on specific axes while maintaining the user's current scroll position. | | useCookies | A React hook that provides an unopinionated interface for managing browser cookies with standard configuration options. | | useCameraCapture | A hook that manages camera access and simplifies capturing still images from a live video stream via a canvas element. | | useCopyToClipboard | A hook to copy text to the system clipboard using the modern Clipboard API. | | useCountDown | High-precision React hook for managing synchronized countdown timers with manual lifecycle controls and drift-correction. | | useDebouncedState | A state management hook that tracks immediate value changes while providing a delayed update for performance-heavy operations. | | useExternalNotifications | Manages and synchronizes system notifications across multiple contexts using a global external store. | | useGeolocation | A comprehensive, SSR-safe hook for interfacing with the Geolocation API and Permissions API to track device coordinates and access status. | | useHoverIntent | A detection hook that distinguishes between accidental mouse-overs and intentional user hovers. | | useFile | Manages file selection state and provides input-ready props for uploads and drag-and-drop. | | useFullscreen | A declarative interface for managing the browser Fullscreen API on a specific DOM element. | | useIdle | An SSR-safe hook to monitor user inactivity by tracking browser interaction events and exposing real-time idle status based on a custom timeout. | | useIndexedDB | A React hook that abstracts the boilerplate of the IndexedDB API, facilitating database connections and transaction management. | | useIntersectionObserver | A hook that monitors the visibility and intersection of a DOM element within a viewport. | | useIntervalSafe | A declarative and robust React hook for managing setInterval lifecycles with execution limits and manual controls. | | useIsClient | Returns true if the code is running in the browser and false if it is running on the server. | | useIsDesktop | Determines if the current viewport width meets or exceeds a specified desktop breakpoint. | | useIsFirstRender | Tracks whether the current render cycle is the initial mount of the component. | | useList | A stateful array management hook providing memoized utility functions for CRUD operations on lists. | | useLocalStorage | A typed React hook for interacting with the Web Storage API, providing automatic JSON serialization and fallback support. | | useLocaleNotifications | Provides a direct interface to trigger browser system notifications within a component. | | useNetworkInformation | A performance-aware hook that provides real-time network telemetry and user connectivity preferences to adapt application behavior. | | usePageVisibility | Provides the current visibility state of the document using the Page Visibility API. | | usePermissions | A reactive hook that observes and synchronizes browser permission statuses in real-time. | | usePictureInPicture | A specialized hook to manage the Picture-in-Picture (PiP) Web API for floating video playback. | | usePopover | A lifecycle management hook for popover UI elements that handles visibility and "click-outside" logic. | | usePreferredTheme | Resolves the effective theme by reconciling system preferences and manual user selection. | | usePreferredLanguage | Manages and resolves the application language based on system settings and user overrides. | | usePreviousDistinct | A utility hook that captures the last distinct value of a variable, filtering out redundant consecutive updates. | | useResettableState | Extends standard state management with a memoized reset mechanism to revert to the initial value. | | useScreenOrientation | A React hook that provides real-time access to the device's screen orientation state and control methods via the Screen Orientation API. | | useScreenSize | Returns the current inner dimensions of the browser window. | | useScreenWakeLock | A React hook that provides unopinionated access to the Screen Wake Lock API to prevent devices from dimming or locking the screen. | | useServerSentEvent | A React hook that provides unopinionated access to the EventSource Web API for receiving real-time server-side updates. | | useShoppingCart | A generic, domain-agnostic hook for managing complex shopping cart logic and calculations. | | useSmartVideo | An advanced video hook that combines intersection logic with playback control for automated "smart" behavior. | | useSpeech | Provides unopinionated, high-level access to the Web Speech API for speech-to-text recognition. | | useSummarizer | Provides low-level access to the browser's built-in AI Summarizer API. | | useTaskQueue | A React hook for managing and executing a sequential queue of asynchronous tasks with automatic concurrency control. | | useTimeout | A declarative React hook for managing the lifecycle of single-execution timers with manual controls and SSR safety. | | useThrottledCallback | A performance-optimization hook that limits the execution frequency of a callback to one per specified time window. | | useTraceUpdates | Logs property changes to the console whenever the component updates. | | useTranslator | Enables AI-powered text translation directly within the browser via the Translator API. | | useToggle | A lightweight, unopinionated hook to manage boolean state toggling with memoized handlers. | | useUserActivation | A React hook that tracks the browser's User Activation state to determine if a user has interacted with the page. | | useVibration | A React hook that provides an SSR-safe interface to interact with the device's physical vibration hardware. | | useWebsocket | A comprehensive React hook for managing WebSocket connections with built-in auto-reconnection logic, message history, and SSR safety. |

License

MIT