react-use

このスキルは react-use v17.6.0 を基に、2026-01-29 に生成されました。

react-use は React アプリケーションの一般的なパターンに対応する即座に使用可能な機能を提供する、基本的な React Hooks のコレクションです。センサー、UI インタラクション、アニメーション、副作用、ライフサイクル管理、および状態管理のためのフックが含まれています。

コア参照

トピック	説明	参照
Usage	インポートパターンと tree-shaking の推奨事項	core-usage

Sensors

Sensor フックはブラウザ API とデバイスインターフェースの変更をリッスンし、更新された状態でコンポーネントの再レンダリングを強制します。

トピック	説明	参照
useBattery	デバイスのバッテリー状態を追跡	sensors-battery
useGeolocation	ユーザーのデバイスの地理的位置を追跡	sensors-geolocation
useHover	要素のマウスホバー状態を追跡	sensors-hover
useHash	ロケーションハッシュ値を追跡	sensors-hash
useIdle	ユーザーが非アクティブかどうかを追跡	sensors-idle
useIntersection	HTML 要素の交差を追跡	sensors-intersection
useKey	キープレスを追跡	sensors-key
useKeyPress	キープレス状態を追跡	sensors-key-press
useKeyPressEvent	キープレスイベントを処理	sensors-key-press-event
useKeyboardJs	キーボードのキー組み合わせを追跡	sensors-keyboard-js
useLocation	ページナビゲーションバーの位置状態を追跡	sensors-location
useSearchParam	URL 検索パラメータを追跡	sensors-search-param
useLongPress	ロングプレスジェスチャを追跡	sensors-long-press
useMedia	CSS メディアクエリの状態を追跡	sensors-media
useMediaDevices	接続されたハードウェアデバイスの状態を追跡	sensors-media-devices
useMotion	デバイスのモーションセンサーの状態を追跡	sensors-motion
useMouse	マウス位置の状態を追跡	sensors-mouse
useMouseWheel	スクロールされたマウスホイールの deltaY を追跡	sensors-mouse-wheel
useNetworkState	ブラウザのネットワーク接続状態を追跡	sensors-network-state
useOrientation	デバイスの画面向きを追跡	sensors-orientation
usePageLeave	マウスがページの境界を離れるときにトリガー	sensors-page-leave
useScratch	マウスクリックアンドスクラブの状態を追跡	sensors-scratch
useScroll	HTML 要素のスクロール位置を追跡	sensors-scroll
useScrolling	HTML 要素がスクロール中かどうかを追跡	sensors-scrolling
useStartTyping	ユーザーが入力を開始したときを検出	sensors-start-typing
useWindowScroll	Window スクロール位置を追跡	sensors-window-scroll
useWindowSize	Window 寸法を追跡	sensors-window-size
useMeasure	HTML 要素の寸法を追跡	sensors-measure
useSize	要素サイズを追跡	sensors-size
createBreakpoint	ブレークポイント付きで innerWidth を追跡	sensors-breakpoint
useScrollbarWidth	ブラウザのネイティブスクロールバーの幅を検出	sensors-scrollbar-width
usePinchZoom	ポインタイベントを追跡してピンチズームを検出	sensors-pinch-zoom

UI

UI フックを使用すると、UI 要素の状態変更を制御およびサブスクライブできます。

トピック	説明	参照
useAudio	オーディオを再生してそのコントロールを公開	ui-audio
useClickAway	ユーザーが対象領域外をクリックしたときにコールバックをトリガー	ui-click-away
useCss	CSS を動的に調整	ui-css
useDrop	ファイル、リンク、コピーペーストのドロップを追跡	ui-drop
useFullscreen	要素またはビデオを全画面表示	ui-fullscreen
useSlider	任意の HTML 要素にスライド動作を提供	ui-slider
useSpeech	テキスト文字列から音声を合成	ui-speech
useVibrate	Vibration API を使用して物理的フィードバックを提供	ui-vibrate
useVideo	ビデオを再生し、その状態を追跡し、再生コントロールを公開	ui-video

Animations

Animation フックは通常、数値を時間経過で補間します。

トピック	説明	参照
useRaf	requestAnimationFrame ごとにコンポーネントを再レンダリング	animations-raf
useInterval	設定された間隔でコンポーネントを再レンダリング	animations-interval
useHarmonicIntervalFn	ハーモニック間隔関数	animations-harmonic-interval
useSpring	バネダイナミクスに従い時間経過で数値を補間	animations-spring
useTimeout	タイムアウト後にコンポーネントを再レンダリング	animations-timeout
useTimeoutFn	タイムアウト後に指定された関数を呼び出し	animations-timeout-fn
useTween	0 から 1 への数値を補間しながらコンポーネントを再レンダリング	animations-tween
useUpdate	呼び出されたときにコンポーネントを再レンダリングするコールバックを返す	animations-update

Side-effects

副作用フックを使用すると、ブラウザの API を使用してさまざまな副作用をトリガーできます。

トピック	説明	参照
useAsync	非同期関数を解決	side-effects-async
useAsyncFn	手動実行による非同期関数	side-effects-async-fn
useAsyncRetry	再試行機能付きの非同期関数	side-effects-async-retry
useBeforeUnload	ユーザーがページをリロードまたは閉じようとするときにブラウザアラートを表示	side-effects-before-unload
useCookie	クッキーの読み取り、更新、削除の方法を提供	side-effects-cookie
useCopyToClipboard	テキストをクリップボードにコピー	side-effects-copy-to-clipboard
useDebounce	関数をデバウンス	side-effects-debounce
useError	エラーディスパッチャー	side-effects-error
useFavicon	ページのファビコンを設定	side-effects-favicon
useLocalStorage	localStorage 内の値を管理	side-effects-local-storage
useSessionStorage	sessionStorage 内の値を管理	side-effects-session-storage
useLockBodyScroll	body 要素のスクロールをロック	side-effects-lock-body-scroll
useRafLoop	RAF ループ内で指定された関数を呼び出し	side-effects-raf-loop
useThrottle	関数をスロットル	side-effects-throttle
useThrottleFn	スロットル関数のバリアント	side-effects-throttle-fn
useTitle	ページのタイトルを設定	side-effects-title
usePermission	ブラウザ API のパーミッション状態をクエリ	side-effects-permission

Lifecycles

ライフサイクルフックは組み込みの React フックを変更および拡張し、React Class コンポーネントのライフサイクルパターンを模倣します。

トピック	説明	参照
useEffectOnce	1 回だけ実行される修正版 useEffect	lifecycles-effect-once
useEvent	イベントをサブスクライブ	lifecycles-event
useLifecycles	マウントおよびアンマウントコールバックを呼び出し	lifecycles-lifecycles
useMountedState	コンポーネントがマウントされているかどうかを追跡	lifecycles-mounted-state
useUnmountPromise	Promise サポート付きでコンポーネントがマウントされているかを追跡	lifecycles-unmount-promise
usePromise	コンポーネントがマウントされている間だけ Promise を解決	lifecycles-promise
useLogger	コンポーネントがライフサイクルを通じるときにコンソールにログ出力	lifecycles-logger
useMount	マウントコールバックを呼び出し	lifecycles-mount
useUnmount	アンマウントコールバックを呼び出し	lifecycles-unmount
useUpdateEffect	更新時のみ副作用を実行	lifecycles-update-effect
useIsomorphicLayoutEffect	サーバーで動作する useLayoutEffect	lifecycles-isomorphic-layout-effect
useDeepCompareEffect	ディープ比較を含む useEffect	lifecycles-deep-compare-effect
useShallowCompareEffect	シャロー比較を含む useEffect	lifecycles-shallow-compare-effect
useCustomCompareEffect	カスタム比較関数を含む useEffect	lifecycles-custom-compare-effect

State

State フックを使用すると、ブール値、配列、およびマップの状態を簡単に管理できます。

トピック	説明	参照
createMemo	メモ化フックのファクトリー	state-create-memo
createReducer	カスタムミドルウェア付きのリデューサーフックのファクトリー	state-create-reducer
createReducerContext	コンポーネント間で状態を共有するフックのファクトリー	state-create-reducer-context
createStateContext	コンポーネント間で状態を共有するフックのファクトリー	state-create-state-context
createGlobalState	コンポーネント間の共有状態	state-create-global-state
useDefault	状態が null または undefined のときにデフォルト値を返す	state-default
useGetSet	ロー状態の代わりに状態ゲッター get() を返す	state-get-set
useGetSetState	useGetSet と useSetState の組み合わせ	state-get-set-state
useLatest	最新の状態またはプロップを返す	state-latest
usePrevious	前の状態またはプロップを返す	state-previous
usePreviousDistinct	述語付きの usePrevious のような機能	state-previous-distinct
useObservable	Observable の最新値を追跡	state-observable
useRafState	requestAnimationFrame 後にのみ更新する setState メソッドを作成	state-raf-state
useSetState	this.setState のように動作する setState メソッドを作成	state-set-state
useToggle	ブール値の状態を追跡	state-toggle
useCounter	数値の状態を追跡	state-counter
useList	配列の状態を追跡	state-list
useMap	オブジェクトの状態を追跡	state-map
useSet	Set の状態を追跡	state-set
useQueue	シンプルなキューを実装	state-queue
useStateList	配列を循環的に反復	state-state-list
useStateValidator	バリデータ関数で状態を検証	state-state-validator
useStateWithHistory	前の状態値を保存し、それらを通じて移動するハンドルを提供	state-state-with-history
useMultiStateValidator	複数の状態を追跡する useStateValidator のような機能	state-multi-state-validator
useMediatedState	通常の useState のようだが、カスタム関数で仲介	state-mediated-state
useFirstMountState	現在のレンダリングが最初かどうかを確認	state-first-mount-state
useRendersCount	コンポーネントレンダリングをカウント	state-renders-count
useMethods	useReducer への洗練された代替案	state-methods

Miscellaneous

トピック	説明	参照
useEnsuredForwardedRef	React.forwardedRef を安全に使用	misc-ensured-forwarded-ref