react-use

react-use

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

react-use は、React アプリケーションでよく使われるパターンにすぐ使える機能を提供する、必須の React Hooks コレクションです。センサー、UI インタラクション、アニメーション、副作用、ライフサイクル管理、状態管理のためのフックが含まれています。

コアリファレンス

トピック	説明	リファレンス
使用方法	インポートパターンとツリーシェイキングの推奨事項	core-usage

センサー

センサーフックは、ブラウザー 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

アニメーション

アニメーションフックは通常、数値を時間の経過に応じて補間します。

トピック	説明	リファレンス
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

副作用

副作用フックを使うと、ブラウザーの API を利用してアプリでさまざまな副作用を発生させることができます。

トピック	説明	リファレンス
useAsync	非同期関数の結果を取得します	side-effects-async
useAsyncFn	手動で実行する非同期関数です	side-effects-async-fn
useAsyncRetry	再試行機能を備えた非同期関数です	side-effects-async-retry
useBeforeUnload	ユーザーがページを再読み込みまたは閉じようとすると、ブラウザーの警告を表示します	side-effects-before-unload
useCookie	Cookie の読み取り、更新、削除を行います	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

ライフサイクル

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

トピック	説明	参照
useEffectOnce	一度だけ実行されるよう変更された 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

状態

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

トピック	説明	リファレンス
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	最新の状態または props を返します	state-latest
usePrevious	前の状態または props を返します	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

その他

トピック	説明	リファレンス
useEnsuredForwardedRef	React.forwardedRef を安全に使用します	misc-ensured-forwarded-ref