📄️ useBroadcastChannel
`useBroadcastChannel` 是一個允許你在組件中使用 `BroadcastChannel API` 的 hook。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useClipboard
將文本複製到用戶的剪貼板。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useColorMode
import Details from "@theme/Details"; 響應式顏色模式(主題)管理,具有自動數據持久化和靈活配置功能。 <Details summary="點擊展開"> 對於服務端渲染的應用程式而言,由於無法在服務端獲取到用戶的顏色偏好。所以第一次渲染的時候可能會出現闃爍。想要避免此問題,你可以參考一下步驟。 本文介紹其用法、最佳
📄️ useCopyToClipboard
將文本複製到用戶的剪貼板。useClipboard 的別名。學習使用模式、最佳實踐和 React 開發者的代碼示例。
📄️ useCssVar
管理 CSS 變量。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useDarkMode
import Details from "@theme/Details"; 具有自動數據持久性的深色模式。 <Details summary="點擊展開"> 對於服務端渲染的應用程式而言,由於無法在服務端獲取到用戶的顏色偏好。所以第一次渲染的時候可能會出現闃爍。想要避免此問題,你可以參考一下步驟。 本文介紹其用法、最佳
📄️ useDevicePixelRatio
`useDevicePixelRatio` 是一個返回螢幕的設備像素比的 hook。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useElementByPoint
`useElementByPoint` 是一個用於獲取指定坐標下的元素的 Hook。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useEventSource
`useEventSource` 是一個 hook,允許您訂閱 EventSource 並實時接收更新。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useEyeDropper
使用 [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) 來選擇顏色。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useFavicon
設置頁面的 favicon 圖標。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useFetchEventSource
`useFetchEventSource` 是一個 React Hook,允許你使用 POST 等 HTTP 方法訂閱 EventSource 並實時接收更新。 :::note 這個例子在實時編輯器中不起作用,因為它需要一個服務器來發送事件。你可以在本地環境中嘗試它。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useFileDialog
輕鬆選取文件。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useFps
輕鬆跟蹤 FPS。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useFullscreen
元素的全螢幕展示。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useGeolocation
跟蹤[地理位置](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)的 React Hook 如果用戶願意,它允許用戶向網絡應用程式提供他們的位置。 出於隱私原因,報告位置信息需要用戶許可。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useIdle
跟蹤頁面上的用戶是否處於空閒狀態。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useInfiniteScroll
無限滚動。 本文介紹其用法、最佳實踐與代碼示例。
📄️ 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。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useMediaDevices
輕鬆跟蹤已連接的硬體設備。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useMediaQuery
輕鬆使用媒體查詢。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useMobileLandscape
跟蹤移動設備是否處於橫屏模式。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useMouse
跟蹤滑鼠位置。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useMousePressed
跟蹤滑鼠按下狀態。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useNetwork
跟蹤瀏覽器網路連接狀況。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useObjectUrl
輕鬆創建對象 URL。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useOnline
`useNetwork` 的包裝,檢測網路狀況。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useOrientation
跟蹤用戶設備的螢幕方向。 本文介紹其用法、最佳實踐與代碼示例。
📄️ usePageLeave
跟蹤滑鼠是否離開頁面。 本文介紹其用法、最佳實踐與代碼示例。
📄️ usePermission
瀏覽器權限查詢。 本文介紹其用法、最佳實踐與代碼示例。
📄️ usePlatform
跟蹤用戶當前平台的信息。 本文介紹其用法、最佳實踐與代碼示例。
📄️ 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
跟蹤是否偏好黑色主題。 本文介紹其用法、最佳實踐與代碼示例。
📄️ usePreferredLanguages
`usePreferredLanguages` 是一個返回用戶首選語言的字符串數組的 hook。它使用 `navigator.languages`。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useReducedMotion
跟蹤用戶動畫偏好。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useScratch
跟蹤元素上的刮擦/拖動手勢,支持滑鼠和觸摸。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useScreenSafeArea
跟蹤 `env(safe-area-inset-*)` 值。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useScriptTag
Script 標籤注入。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useScroll
跟蹤滾動位置和統計數據。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useScrollIntoView
類似於 `element.scrollIntoView()` 的 React Hook。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useScrollLock
鎖定元素的滾動行為,同時保留嵌套可滾動容器內的滾動功能。學習用法模式、最佳實踐以及代碼示例。
📄️ useSpeechRecognition
用於 React 的響應式語音識別 API。支持實時語音識別、可配置選項、跨瀏覽器兼容性和 TypeScript 支持。了解用法模式、最佳實踐和代碼示例。
📄️ useTextDirection
跟蹤文字排列方向。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useTitle
設置文檔標題。 本文介紹其用法、最佳實踐與代碼示例。
📄️ useWebNotification
通知 API 的 Web 通知接口用於配置並向用戶顯示桌面通知。 :::warning 注意:對於Mac系統的用戶,需要在系統設置中啟用Chrome的通知功能。 如果系統中沒有啟用Chrome的通知,即使前端頁面請求權限成功,也不會顯示通知。 本文介紹其用法、最佳實踐與代碼示例。