📄️ useBatteryStatus()
The useBatteryStatus() hook provides real-time information about the device's battery level and charging status, automatically updating as these values change.
📄️ useClickOutside()
The useClickOutside() hook lets you trigger a callback whenever the user clicks outside of a target element
📄️ useClipboard()
The useClipboard() hook will help you interact with the browser's navigator.clipboard property in order to copy text to the user's clipboard.
📄️ useConfirmExit()
The useConfirmExit() hook lets you display a prompt to the user before he closes the current tab depending on whether the tab is declared to be dirty or not.
📄️ useCookie()
The useCookie() hook provides reactive cookie management with automatic synchronization across browser tabs. Use this for persistent storage of simple data that needs to survive page reloads.
📄️ useCookieListener()
The useCookieListener() hook monitors cookie changes and executes callbacks when specified cookies update. Use this to synchronize state across tabs/windows or react to authentication changes.
📄️ useDebounce()
The useDebounce() hook lets you debounce value changes inside your components. Use this when you want to perform a heavy operation based on state
📄️ useDeviceOS()
The useDeviceOS() hook detects the user's operating system, including mobile emulators, and uses string manipulation for identifying unique or new OS versions.
📄️ useEventListener()
The useEventListener() hook lets you quickly add an event to a certain ref or the app's window if no ref is specified
📄️ useFavicon()
The useFavicon() hook lets change the website's favicon dynamically from your components! The favicon changes back to the default one on refresh!
📄️ useFirstRender()
The useFirstRender() hook lets you detect whether or not the component you use it on is on its initial render, it returns a boolean value with the result.
📄️ useFullscreen()
The useFullscreen() hook can toggle between entering fullscreen mode and exiting fullscreen mode.
📄️ useHold()
The useHold() hook lets you detect long presses (holds) on target elements and trigger a handler after a set timeout is elapsed while the user is still holding down (click/touch) the element.
📄️ useHover()
The useHover() hook lets you detect if the user's mouse is hovering over an element
📄️ useIdle()
The useIdle() hook lets you detect current user activity or inactivity on a web page, returning a boolean value that represents whether or not the user is currently active. The user is set as inactive when no events are triggered after a specified delay.
📄️ useInputValue()
The useInputValue() hook lets you easily manage states for inputs in your components
📄️ useIntersectionObserver()
The useIntersectionObserver hook provides a way to detect when an element enters or exits the viewport. It offers options for configuring intersection thresholds, margins, and one-time animation triggers.
📄️ useInterval()
The useInterval() hook provides managed interval execution with start/stop controls. Use this for recurring tasks like polls, animations, or delayed state updates.
📄️ useIsomorphicLayoutEffect()
The useIsomorphicLayoutEffect() hook lets switch between using useEffect and useLayoutEffect depending on the execution environment. If your app uses server side rendering, the hook will run useEffect, otherwise it will run useLayoutEffect.
📄️ useKeyPress()
The useKeyPress() hook listens for a specific combination of keys and runs a callback when they are all pressed. It normalizes keys for case-insensitive matching and handles cases like key holding or focus loss to ensure smooth behavior.
📄️ useLeaveDetection()
The useLeaveDetection() hook allows you to detect when a user's cursor leaves the document's boundaries
📄️ useLocalStorage()
The useLocalStorage() hook is a quick way to set, read, and manage localStorage values. It comes with automatic JSON serialization/deserialization.
📄️ useMediaQuery()
The useMediaQuery() hook allows you to react to media queries inside of your React components. It accepts a media query argument and returns true or false when the query is a match or not with your current browser's properties.
📄️ useMousePosition()
The useMousePosition() hook lets you track the mouse position when hovering over a specific container or the entire page, so if a target container is not provided through the ref, it will track the mouse position relative to the entire document.
📄️ useNetwork()
The useNetwork() hook tracks network connectivity status. Use this to show offline/online indicators or handle connection changes in your application.
📄️ useOrientation()
The useOrientation() hook detects and tracks device screen orientation changes. Use this when you need to adapt your UI layout based on portrait/landscape modes.
📄️ usePrefersTheme()
The usePrefersTheme() hook allows the detection of the user's preferred system theme
📄️ usePreventBodyScroll()
The usePreventBodyScroll() hook disables body scrolling when active and restores it upon deactivation or component unmounting. It provides a boolean state, a setter, and a toggle function for dynamic scroll control.
📄️ useScript()
The useScript() hook allows appending script tags to your document from inside React components. The state variable returns a status that can have one of the following values: idle, loading, ready, error.
📄️ useScrollDevice()
The useScrollDevice() hook detects whether the user is scrolling with a mouse wheel or trackpad. Use this to adapt scroll behaviors or animations based on input device.
📄️ useScrollPosition()
The useScrollPosition() hook allows you to fetch the window's scroll height/width in real time and to programatically set them by using the provided method.
📄️ useSingleEffect()
The useSingleEffect() hook works exactly like useEffect, except it is called only a single time when the component mounts. This helps with React's recent update to the useEffect hook which is being called twice on mount.
📄️ useSize()
The useSize hook observes a referenced DOM element and returns its current width and height, updating the values whenever the element is resized. This is useful for dynamically tracking size changes of any resizable component.
📄️ useTabNotification()
The useTabNotification() hook manages browser tab notifications through title modifications and favicon indicators. Use this to alert users of background activity or new notifications when they're in another tab.
📄️ useTitle()
The useTitle() hook allows the dynamic update of the document's title from your React components! The title passed to this hook can be attached to a piece of state, updating the state will therefore also update the title.
📄️ useToggle()
The useToggle() hook can toggle between a set of two possible values and automatically update the state with the new value, if you want to toggle a boolean's state, see useBoolToggle() below.
📄️ useUpdateEffect()
The useUpdateEffect() hook will work exactly like a useEffect() hook, except it will skip the first render and only react to changes for values passed inside its dependency array after the initial render.
📄️ useUrgentUpdate()
The useUrgentUpdate() hook forces a component to re-render when it gets called from anywhere inside it.
📄️ useWebSocket()
The useWebSocket() hook manages WebSocket connections, providing automatic reconnection and state management. It includes functions to send messages and callbacks for different WebSocket events.
📄️ useWindowSize()
The useWindowSize() hook provides the current window width and height dimensions.