📄️ 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.
📄️ 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.
📄️ 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.
📄️ 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.
📄️ 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.
📄️ 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.
📄️ 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.
📄️ useWindowSize()
The useWindowSize() hook provides the current window width and height dimensions.