📄️ useBroadcastChannel
`useBroadcastChannel` 是一个允许你在组件中使用 `BroadcastChannel API` 的 hook。 本文介绍其用法、最佳实践与代码示例。
📄️ useClipboard
将文本复制到用户的剪贴板。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useCssVar
管理 CSS 变量。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useDarkMode
import Details from "@theme/Details"; 具有自动数据持久性的深色模式。 <Details summary="点击展开"> 对于服务端渲染的应用程序而言,由于无法在服务端获取到用户的颜色偏好。所以第一次渲染的时候可能会出现闪烁。想要避免此问题,你可以参考一下步骤。 本文介绍其用法、最佳
📄️ useDevicePixelRatio
`useDevicePixelRatio` 是一个返回屏幕的设备像素比的 hook。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useElementByPoint
`useElementByPoint` 是一个用于获取指定坐标下的元素的 Hook。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useEventSource
`useEventSource` 是一个 hook,允许您订阅 EventSource 并实时接收更新。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useEyeDropper
使用 [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) 来选择颜色。 本文介绍其用法、最佳实践与代码示例。
📄️ useFavicon
设置页面的 favicon 图标。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useFetchEventSource
`useFetchEventSource` 是一个 React Hook,允许你使用 POST 等 HTTP 方法订阅 EventSource 并实时接收更新。 :::note 这个例子在实时编辑器中不起作用,因为它需要一个服务器来发送事件。你可以在本地环境中尝试它。 本文介绍其用法、最佳实践与代码示例。
📄️ useFileDialog
轻松选取文件。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useFps
轻松跟踪 FPS。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useFullscreen
元素的全屏展示。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useGeolocation
跟踪[地理位置](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)的 React Hook 如果用户愿意,它允许用户向网络应用程序提供他们的位置。 出于隐私原因,报告位置信息需要用户许可。 本文介绍其用法、最佳实践与代码示例。
📄️ useIdle
跟踪页面上的用户是否处于空闲状态。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useInfiniteScroll
无限滚动。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useKeyModifier
跟踪[按键](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState#browser_compatibility)是否被按下。 本文介绍其用法、最佳实践与代码示例。
📄️ useLocationSelector
有选择地从 `location` 检索属性。 仅当您返回的值更改时,此 Hook 才会重新渲染。 有关更多信息,请参阅(https://thisweekinreact.com/articles/useSyncExternalStore-the-undererated-react-api)。 本文介绍其用法、最佳实践与代
📄️ useLongPress
跟踪长按的 React Hook。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useMediaDevices
轻松跟踪已连接的硬件设备。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useMediaQuery
轻松使用媒体查询。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useMobileLandscape
跟踪移动设备是否处于横屏模式。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useMouse
跟踪鼠标位置。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useMousePressed
跟踪鼠标按下状态。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useNetwork
跟踪浏览器网络连接状况。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useObjectUrl
轻松创建对象 URL。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useOnline
`useNetwork` 的包装,检测网络状况。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useOrientation
跟踪用户设备的屏幕方向。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ usePageLeave
跟踪鼠标是否离开页面。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ usePermission
浏览器权限查询。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ usePlatform
跟踪用户当前平台的信息。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ usePreferredColorScheme
[prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) 媒体查询。 本文介绍其用法、最佳实践与代码示例。
📄️ usePreferredContrast
[prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) 媒体查询。 本文介绍其用法、最佳实践与代码示例。
📄️ usePreferredDark
跟踪是否偏好黑色主题。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ usePreferredLanguages
`usePreferredLanguages` 是一个返回用户首选语言的字符串数组的 hook。它使用 `navigator.languages`。 本文介绍其用法、最佳实践与代码示例。
📄️ useReducedMotion
跟踪用户动画偏好。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useScreenSafeArea
跟踪 `env(safe-area-inset-*)` 值。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useScriptTag
Script 标签注入。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useScroll
跟踪滚动位置和统计数据。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useScrollIntoView
类似于 `element.scrollIntoView()` 的 React Hook。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useScrollLock
锁定滚动元素。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useTextDirection
跟踪文字排列方向。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useTitle
设置文档标题。 本文介绍其用法、最佳实践与代码示例。适用于 React 开发中需要处理副作用的场景。
📄️ useWebNotification
通知 API 的 Web 通知接口用于配置并向用户显示桌面通知。 :::warning 注意:对于Mac系统的用户,需要在系统设置中启用Chrome的通知功能。 如果系统中没有启用Chrome的通知,即使前端页面请求权限成功,也不会显示通知。 本文介绍其用法、最佳实践与代码示例。