Browser | React Use

📄️ useBroadcastChannel

`useBroadcastChannel` is a hook that allows you to use the `BroadcastChannel API` in your components. Learn usage patterns, best practices, and code examples fo

📄️ useClipboard

Copy text to a user's clipboard. Learn usage patterns, best practices, and code examples for React developers.

import Details from "@theme/Details"; Reactive color mode (theme) with auto data persistence and flexible configuration. <Details summary="click to open"> For server-side rendered applications, since it's

📄️ useCopyToClipboard

Copy text to a user's clipboard. Alias for useClipboard. Learn usage patterns, best practices, and code examples for React developers.

📄️ useCssVar

Manipulate CSS variables. Learn usage patterns, best practices, and code examples for React developers.

📄️ useDarkMode

import Details from "@theme/Details"; dark mode with auto data persistence. <Details summary="click to open"> For server-side rendered applications, since it's

📄️ useDevicePixelRatio

`useDevicePixelRatio` is a hook that returns the device pixel ratio of the screen. Learn usage patterns, best practices, and code examples for React developers.

📄️ useElementByPoint

`useElementByPoint` is a hook that returns the element at a given point. It is useful for implementing drag and drop, or for any other use case where you need t

📄️ useEventSource

`useEventSource` is a hook that allows you to subscribe to an EventSource and receive updates in real-time. Learn usage patterns, best practices, and code examp

📄️ useEyeDropper

Use [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) to pick color. Learn usage patterns, best practices, and code examples for

📄️ useFavicon

React side-effect hook sets the favicon of the page. Learn usage patterns, best practices, and code examples for React developers.

📄️ useFetchEventSource

`useFetchEventSource` is a hook that allows you to subscribe to an EventSource using HTTP methods like POST and receive updates in real-time. :::note This examp

📄️ useFileDialog

Open file dialog with ease. Learn usage patterns, best practices, and code examples for React developers.

📄️ useFps

React Sensor Hooks that tracks FPS (frames per second). Learn usage patterns, best practices, and code examples for React developers.

📄️ useFullscreen

Display an element full-screen. Learn usage patterns, best practices, and code examples for React developers.

📄️ useGeolocation

React Sensor Hooks that tracks [Geolocation](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) It allows the user to provide their location to w

📄️ useIdle

React sensor hook that tracks if user on the page is idle. Learn usage patterns, best practices, and code examples for React developers.

📄️ useInfiniteScroll

Infinite scrolling of the element. Learn usage patterns, best practices, and code examples for React developers.

📄️ useKeyModifier

React Sensor Hook that tracks state of any of the [supported modifiers](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState#browser_

📄️ useLocationSelector

Selectively retrieve properties from location. This hook will only re-render when the value you return is changed. For more information, [see](https://thisweeki

📄️ useLongPress

React sensor hook that fires a callback after long pressing. Learn usage patterns, best practices, and code examples for React developers.

📄️ useMediaDevices

React sensor hook that tracks connected hardware devices. Learn usage patterns, best practices, and code examples for React developers.

📄️ useMediaQuery

Ease with media query. Learn usage patterns, best practices, and code examples for React developers.

📄️ useMobileLandscape

React hook that returns `true` if the mobile device is in landscape mode and `false` otherwise. Learn usage patterns, best practices, and code examples for Reac

📄️ useMouse

React sensor hooks that track cursor positio. Learn usage patterns, best practices, and code examples for React developers.

📄️ useMousePressed

React Sensor Hook that tracks mouse pressing state. Triggered by mousedown touchstart on target element and released by mouseup mouseleave touchend touchcancel

📄️ useNetwork

Tracks the state of browser's network connection. As of the standard it is not guaranteed that browser connected to the Internet, it only guarantees the network

📄️ useObjectUrl

Creates an URL for the provided `File`, `Blob`, or `MediaSource` via [URL.createObjectURL()](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectUR

📄️ useOnline

A wrapper of `useNetwork`. Learn usage patterns, best practices, and code examples for React developers.

📄️ useOrientation

React sensor hook that tracks screen orientation of user's device. Learn usage patterns, best practices, and code examples for React developers.

📄️ usePageLeave

React sensor hook that tracks when mouse leaves the page. Learn usage patterns, best practices, and code examples for React developers.

📄️ usePermission

React side-effect hook to query permission status of browser APIs. Learn usage patterns, best practices, and code examples for React developers.

📄️ usePlatform

React hook to tracked the platform of the user. Learn usage patterns, best practices, and code examples for React developers.

📄️ usePreferredColorScheme

[prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query. Learn usage patterns, best practices, and code

📄️ usePreferredContrast

[prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) media query. Learn usage patterns, best practices, and code example

📄️ usePreferredDark

React Hook that tracks dark theme preference. Learn usage patterns, best practices, and code examples for React developers.

📄️ usePreferredLanguages

`usePreferredLanguages` is a hook that returns the user's preferred languages as an array of strings. It uses the `navigator.languages`. Learn usage patterns, b

📄️ useReducedMotion

React Hook that tracks motion preference. Learn usage patterns, best practices, and code examples for React developers.

📄️ useScratch

React sensor hook that tracks scratching/dragging gestures on an element with mouse and touch support. Learn usage patterns, best practices, and code examples for React developers.

📄️ useScreenSafeArea

React sensor hook that tracks `env(safe-area-inset-*)`. Learn usage patterns, best practices, and code examples for React developers.

📄️ useScriptTag

Script tag injecting. Learn usage patterns, best practices, and code examples for React developers.

📄️ useScroll

React Sensor Hook that tracks scroll position and stat. Learn usage patterns, best practices, and code examples for React developers.

📄️ useScrollIntoView

React sensor hook works like `element.scrollIntoView(). Learn usage patterns, best practices, and code examples for React developers.

📄️ useScrollLock

Lock scrolling of the element while preserving scrolling within nested scrollable containers. Learn usage patterns, best practices, and code examples for React developers.

📄️ useSpeechRecognition

Reactive SpeechRecognition API for React. Real-time speech recognition with configurable options, cross-browser compatibility, and TypeScript support. Learn usage patterns, best practices, and code examples.

📄️ useTextDirection

change [dir](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) of the element's text. Learn usage patterns, best practices, and code exam

📄️ useTitle

set document title. Learn usage patterns, best practices, and code examples for React developers.

📄️ useWebNotification

The Web Notification interface of the Notifications API is used to configure and display desktop notifications to the user. :::warning Attention: For users on t