React Hooks

Source: https://github.com/rehooks/awesome-react-hooks at 33424d3e810c
License: CC0-1.0
Read the English original

This edition is an AI-assisted translation.

awesome-react-hooks

素晴らしいReact Hooksリソース

ドキュメント

React Hooksドキュメント

ディスカッション

React Hooks RFC

チュートリアル

ビデオ

ポッドキャスト

ツール

eslint-plugin-react-hooks
hooks.macro 自動メモ化無効化のためのBabelマクロ
CodeSandboxスターターキット
VS Code用React Hooksスニペット
hook-into-props hooksを使ってHOCsを構築するヘルパー。クラスコンポーネントでhooksを使うのに便利。
react-universal-hooks React Universal Hooks：関数型またはクラスコンポーネントならどこでもuse**を使う
Jooks Reactのhooks API (useState など) をモックしてカスタムhooksをユニットテストする
react-hooks-testing-library カスタムReact hooksのユニットテストを作成するためのライブラリ。

カタログ

@react-hookz/web - 細心の注意と SSR 互換性を念頭に構築された、汎用 React hooks のライブラリ。
ahooks エンタープライズアプリケーションを対象とした React Hooks のコレクション。
beautiful-react-hooks(🔥) コンポーネントとカスタムhooksの開発を高速化するためのhooksのコレクション。
Captain hook hooksの控えめなリスト。
crooks ユニークなReact Hooksのコレクション。
hooks-by-example hook使用法の初心者向けの実世界の例のコレクション。
Hooks.guide コミュニティによってキュレートされたReact hooksのコレクション。
react-recipes 👩‍🍳 必須hookレシピのコレクション 🥘
Searchable Collection of React Hooks
Sunflower(🌻) antdコンポーネントを返すReact Hooksのコレクション。
useHooks(🐠) 毎日新しいReact Hookレシピ。
Use Hooks 再利用可能なReact Hooksのコレクション。

パッケージ

@21kb/react-hooks hooksに_夢中になる_ための React Hooks のセット。
@d2k/react-devto Dev.to API リクエスト用の React hook
@d2k/react-github Github API リクエスト用の React hook
@d2k/react-localstorage localstorage 値の更新とクリアを処理し、コンポーネントとの同期を保つ React hook。
@elgorditosalsero/react-gtm-hook Google Tag Manager を簡単に処理するための React hook。
@hookstate/core React 用の最新で非常に高速で拡張可能な状態管理。
@jzone/react-request-hook 🐶 カスタムリクエスト用の React hook、様々なライブラリと互換性があり、redux をサポート
@kevinwolf/formal react hooks時代のための優雅なフォーム管理プリミティブ。
@koale/useworker ⚙️ Web worker を使用してバックグラウンドで重い処理を実行し、UI をブロックしない
@marvelsq/use-properties-hook FunctionComponent 内のインスタンス関数（class-propertiesのような、ShallowCompareでの比較も可能）
@rehooks/component-size コンポーネントのサイズを決定するための React hook。
@rehooks/document-title ドキュメントタイトルを更新するための React hook。
@rehooks/document-visibility ドキュメント表示に購読するための React hook。
@rehooks/input-value 入力値を作成するための React hook。
@rehooks/local-storage localStorage[key] をコンポーネントと同期する React hook。
@rehooks/network-status ネットワークステータスを取得するための React hook。
@rehooks/online-status オンラインステータスを取得するための React Hook。
@rehooks/window-scroll-position ウィンドウの x および y 位置を取得するための React hook。
@rehooks/window-size ウィンドウサイズの購読をするための React hook。
@rekindle/use-request 🤖 リクエスト作成用の React hook。
@rkrupinski/use-state-machine 有限状態マシンhook。
@staltz/use-profunctor-state Profunctor Optics を使った状態管理用の React Hook
@webscopeio/react-health-check 🏥 API サービスの健全性をチェックするための軽量 React hook。
@wellyshen/use-web-animations 🍿 Web Animations API を使用した高性能で操作可能なアニメーション用の React hook。
@withvoid/melting-pot React hook ユーティリティライブラリ。
ahooks/usetable クエリテーブルシーン用のプログレッシブソリューション。
concent React に特化した状態管理。シンプルで予測可能、プログレッシブで効率的。
constate useContextState と useContextReducer を使ってローカル状態をグローバル状態に変換。
conuse Context を使って Hook を共有
easy-peasy React 用のシンプルなグローバル状態。
fetch-suspense Suspense サポート付き Fetch API 用の React hook。
graphql-hooks ミニマルな hooks ファーストの GraphQL クライアント。
mobx-react-lite 実験的 React hooks に基づいた MobX 用の軽量 React バインディング。
modali React Hooks をサポートするために最初から構築された、楽しいモーダルダイアログコンポーネント。
moment-hooks 汎用 react hooks を含むライブラリ
nice-hooks 🍹 react hooks をより簡単に使用できるようにするたくさんのいい hooks (useState コールバック / ライフサイクル / インスタンス変数)
promise-hook Promise ベースのデータ取得を簡単にするための React hook。
reactive-react-redux React Hooks と Proxy を使った React Redux バインディング
react-async-hook React コンポーネントにアドホックなデータを取得するための React hook。
react-cached-callback キーで複数のコールバックをキャッシュするための React hooks。例えば、ループ内で。
react-context-refs コンテキスト経由で要素の ref を取得するための React hooks。
react-cookie ユニバーサルクッキー用の React hooks。
react-cool-dimensions 📏 要素のサイズを測定してレスポンシブコンポーネントを処理するための React hook。
react-cool-form 📋 フォームの状態と検証用の React hooks。より少ないコード、より高いパフォーマンス。
react-cool-inview 🖥️ 要素が viewport に入るまたは出るのを監視するための React hook（または別の要素）。
react-cool-onclickoutside 🖱 コンポーネント外のクリックをリッスンするための React hook。
react-cool-portal 🍒 モーダル、ドロップダウン、ツールチップなどをまたは他の場所にレンダリングする Portals 用の React hook。
react-cool-virtual ♻️ 大きなデータセットを簡単にレンダリングするための小さな React hook。
react-countdown-hook React 用のシンプルながら強力なカウントダウンhook。requestAnimationFrame で動作。
react-darkreader 🌓 darkreader にインスパイアされた、サイトにダーク/ナイトモードを追加するための React Hook。
react-declare-form React hook ベースの宣言型フォームライブラリ。
react-deep-hooks 非プリミティブ依存関係用の React hooks。
react-dom-status-hook DOMContentLoaded イベントに購読するための React hook。
react-enhanced-reducer-hook ミドルウェアを受け入れる useReducer の代替。
react-fetch-hook Fetch API を使いやすくするための React hook。
react-firebase-hooks Firebase で使用するための hooks のコレクション。
react-form-stateful フォームライブラリ。副作用を通じてライブラリを拡張できるようにディスパッチを公開。
react-hanger ユーティリティ hooks の小さなコレクション。
react-hook-mighty-mouse 選択された要素のマウスイベントを追跡する React hook 🐭
react-hook-mousetrap mousetrap で動作するキーまたはキーの組み合わせでコールバックをトリガーするための hook。
react-hookedup 有用な React hooks のコレクション。
react-hook-form 面倒なフォーム検証なし。
react-hook-layout React でのレイアウト管理。
react-hooks-async 中止可能で合成可能な非同期関数用の React カスタム hooks
react-hooks-global-state シンプルなグローバル状態管理。
react-hooks-image-size URL から画像の自然なサイズを取得するための hook。
react-hooks-lib 再利用可能な react hooks のセット。
react-hooks-svgdrawing SVG 描画用の hook。
react-hooks-use-modal モーダルを簡単に開くための hook。
react-hooks-visible 要素の可視性用の hook。Intersection Observer API を使用。
react-hooks-worker Web worker 用の React カスタム hooks
react-hotkey-hook ホットキー用の React hook。
react-i18next React の国際化。ちゃんとやる。
react-immer-hooks Immer を使用した状態更新用の useState と useReducer。
react-indicative-hooks Indicative というデータ検証ライブラリをラップする Hooks
react-intersection-visible-hook 関数型コンポーネントの可視性を追跡するための React hook。
react-media-hook メディアクエリ用の React hook。
react-metatags-hook HTML メタタグを管理する React Hook。
react-native-react-bridge React を実行して、それらの間の通信を処理するための React Native プラグイン。
react-optimistic-ui-hook ⚛️ React hook を使った最小限の「optimistic UI」パターン実装
react-page-name ページタイトルを管理するための React Hook。
react-peer-data WebRTC を使ったファイルとメディアのストリーミング/共有用の PeerData ライブラリ用 React ラッパー。
react-pirate React ライフサイクルとユーティリティ hooks。
react-powerhooks react-powerplug コンポーネント用の Hooks API。
react-promiseful Promise のステータスに基づいて子を条件付きでレンダリングするための React コンポーネントと hook。
react-query React でのデータの非同期取得、キャッシング、更新用の hooks。
react-recaptcha-hook google-recaptcha v3 用の React hook
react-recipes 👩‍🍳 必須 hook レシピのコレクション 🥘
react-request-hook 管理可能でキャンセル可能で安全志向の API リクエスト。
react-responsive React メディアクエリモジュール。
react-rocketjump 状態と副作用を簡単に管理。
react-screen-wake-lock Screen Wake Lock API の React 実装。アプリケーションが実行を続ける必要がある場合、デバイスが暗くなったり画面がロックされたりするのを防ぐ方法を提供
react-script-hook 外部スクリプトを動的に読み込み、それが読み込まれたときを知るための React hook
react-selector-hooks レンダリング外の宣言用の hook ベースのメモ化セレクタファクトリのコレクション。
react-speech-kit ブラウザ音声認識と音声合成用の hooks。
react-state-patterns hooks から React state provider パターンの再利用可能な実装を作成するためのユーティリティパッケージ。
react-swipeable React スワイプイベントハンドラー hook。
react-tracked React Context を使ったシンプルで高速なグローバル状態。不要な再レンダリングを手間なく排除。
react-uniformed 🚀 hooks を使った宣言的な React フォーム。
react-use-api axios 用の非同期 HTTP リクエストデータ。多様な UI 状態、SSR、データ事前キャッシング用に設計。
react-use-browser サーバーが生成したマークアップが最終的なクライアントアプリケーションマークアップと異なる場合、サーバー側でレンダリングされたコンポーネントのクライアント側ハイドレーションを有効にするための hook。
react-use-calendar イベント付きカレンダーを実装するための hook。
react-use-clipboard ユーザーのクリップボードにテキストをコピーする hook。
react-use-d3 D3 を使用するための React hook。
react-use-data-loader データ読み込み用の React hook
react-use-fetch-factory redux でデータの取得と選択を処理する React hook。
react-use-fetch-with-redux API リクエストをキャッシュして redux で機能する React hook。
react-use-form-state フォームと入力状態を管理するための React hook。
react-use-id-hook SSR セーフな一意の ID 文字列を生成するための React hook。
react-use-idb ブラウザで indexDB を使用して値を保存するための React hook。
react-use-infinite-loader :infinity: :page_with_curl: :hourglass_flowing_sand: React アプリ用の超軽量無限ローディング (スクロール) hook
react-use-input 🎣 setter を HTML 入力に直接渡すことができる hook
react-use-lazy-load-image :sunrise: :zap: React アプリに画像遅延読み込みを簡単に追加
react-use-message-bar メッセージバー用のシンプルな React hook。
react-use-modal モーダルを管理するための React hook。
react-use-path 最小サイズの hook スタイル React ルーター。
react-use-scroll-position スクロール位置を使用するための React hook。
react-use-trigger コードの任意の場所からエフェクトをトリガーするための React hook
react-use-watch 依存関係が変更されたときに 1 回だけトリガーされる React hook。
react-use-wavelet Wavelet スマートコントラクトプラットフォームに接続するための React hooks
react-use 必須 hooks のコレクション。
react-useFormless フォーム状態を処理するための React hook。
react-usemiddleware 既存の Redux ミドルウェア (thunk や saga など) を useReducer で使用するための React hook。
react-useportal 🌀 usePortal、Portals 用の React hook
react-user-media navigator.getUserMedia 用の React ラッパー。
react-wait React アプリケーション用の複雑なローダー管理 Hook。
react-window-communication-hook ブラウザコンテキスト (タブ、ウィンドウ、iframe) 間で通信するための React hook。
react-with-hooks 提案された React Hooks API 用の Ponyfill。
reaktion グローバル状態管理用の useState ライク hook。
redhooks React Hooks を使ったグローバル状態管理。redux-thunk や redux-saga などのミドルウェアの使用、またはカスタムミドルウェアの使用もサポート。
redux-react-hook Redux ストアからマップされた状態にアクセスするための React hook。
region-core useProps hook を使ったグローバル状態管理フレームワーク。
rehooks-visibility-sensor 要素がビューにスクロールしたかどうかをチェック。
resynced React Hooks API を使った複数状態管理。
reto hooks を備えた柔軟で効率的な React ストア。
rrh react-redux 用の超シンプルな React Hooks。
rxjs-hooks react hooks で RxJS v6+ を使用する簡単な方法。
scroll-data-hook スクロール速度、距離、方向などに関する情報を返す。
style-hook 🎨 react hooks で js に css を書く。
swr リモートデータ取得用の React Hooks ライブラリ。
the-platform ブラウザ API を React Hooks と一般的な状況のための Suspense フレンドリーな React 要素に変換。
trousers 👖 hooks ファーストの CSS-in-JS ライブラリ。セマンティクスと実行時パフォーマンスに焦点を当てた
use-abortable-fetch fetch を実行して、コンポーネントがアンマウントされたか別のリクエストが行われたときにアボートする React hook。
use-action useEffect とほぼ同じですが、遅延しません。
use-as-bind WASM ソースで as-bind を使用するための React hook。
use-async-memo 非同期メモ化データを生成するための React hook。
use-autocomplete 配列内の検索文字列のオートコンプリート値を返す React hook。
use-axios-react axios 用の React CRUD hooks。豊富な例のリスト
use-boolean ブール状態を処理するための便利なヘルパー。
use-browser-history ブラウザ履歴イベントを処理するための React hook。
use-cart ショッピングカート機能を提供する React hook。
use-click-away DOM 要素がクリックされなかったときにコールバックを呼び出す React hook。
use-clippy ユーザーのクリップボードの読み取りと書き込みを行うための React hook。
use-context-selector ユーザーランドでの React useContextSelector hook。
use-controlled-input-number 数値入力の動作をほぼ期待通りにするための React hook。
use-countries 国と言語をリストするためのカスタム React hook。
use-debounce React 用の debounce (と throttle) hook。
use-deep-compare React の useEffect/useMemo/useCallback hooks と同じですが、入力の深い比較を使用。
use-deep-compare-effect 🐋 React の useEffect hook と同じですが、参照の等価性ではなく入力の深い比較を使用。
use-detect-print ページが印刷中かどうかを検出するための React hook。
use-dimensions 画面とウィンドウの寸法を取得するための React Native hook。
use-double-click 継続的なダブルクリックとクリックおよびダブルクリックイベントの組み合わせ用の React hook
use-eazy-auth 認証を処理するための React hooks。
use-events マウスイベントを処理するための React Hooks のセット。
use-force-update 関数型コンポーネントの再レンダリングを強制するための React hook。
use-hotkeys keydown と keyup キーボードイベントをリッスンし、キーボードショートカットを定義および配分する HotKeys.js React Hook。
use-hovering ホバー状態を追跡するためのシンプルでアクセシブルな React hook。
use-http 🐶 useFetch、アイソモーフィック http リクエスト用の React hook。
use-immer immer を使用して状態を操作するための hook。
use-input-file ファイル入力を作成するための React hook。
use-is-mounted-ref useIsMountedRef はコンポーネントがマウントされたときをチェックするための React Hook。
use-lang-direction HTML 要素の dir 属性値を読み取り、その更新を監視するため、UI をそれに応じて更新できる hook。
use-last-fm Spotify または last.fm がサポートする他のサイトからの現在再生中の曲をリアルタイムで表示する hook。 ♪
use-lilius React 用のヘッドレスカレンダー hook。
use-media React hook を使用した CSS メディアクエリ。
use-mouse-action マウスダウンまたはアップとクリックイベントの両方を監視し、1 回呼び出される関数を持つ React Hooks。
use-multiselect 複数選択状態を管理。
use-overflow X と Y のオーバーフローを検出できる React Hook
use-places-autocomplete 📍 Google Maps Places オートコンプリート用の React hook。
use-popper Popper.js 周辺の React hook ラッパー。
use-query-params URL クエリパラメータで状態を管理するための React Hook。簡単なシリアル化付き。
use-react-modal 🖼 useModal、モーダル/ダイアログ/ライトボックス用の React hook
use-react-router React Router を使用した pub-sub 動作用の React Hook。
use-reactive-state useReactiveState() - React の useState() への反応的な代替案。
use-reducer-async 非同期アクション付き React useReducer
use-redux redux にバインドするための hook。
use-scroller 自動的に次のページを追加して、ユーザーをフルページの読み込みから救う React hook。
use-scroll-to-bottom 要素がスクロールして一番下に到達した場合を検出するための React hook。
use-simple-undo 簡単な取り消し/やり直し機能の実装。
server-push-hooks 🔥 socket.io、SEE などへの React hooks
use-socket.io-client socket.io-client 用の React hook。副作用なく socket.io クライアントを操作。
use-sse ✨useSSE - use Server-Side Effect。クライアントとサーバーの両側で useEffect。
use-ssr ☯️ サーバー、ブラウザ、または react native 上にいるかどうかを判断するための React hook。
use-state-snapshots 取り消し/やり直し機能のための状態変更を追跡するための React hook。
use-substate 単一アプリ状態に購読するための React hook（現在の Redux アプリで機能）。
use-suspender React.Suspense で非同期アクションを実行
use-t hooks を使った多言語。
use-undo 取り消しとやり直し機能を実装するための React hook。
use-videocard キャンバスを使用してクライアントのグラフィックスカード情報を取得するための React hook
use-window-blur-change-title ユーザーが現在のウィンドウからフォーカスを移すときにページタイトルを設定するための React Hook。
useDarkMode 「ダークモード」コンポーネントの実装を支援するカスタム React Hook。
useDeferredState 状態変更を遅延させるための React hook。これは、UI がコンポーネントをアンマウントする前に消失アニメーションが完了するのを待つ必要がある場合に重要。
useDropZone シンプルなドラッグアンドドロップ機能を設定できる React hook。
useEmailAutocomplete 📬 メールオートコンプリート入力用の React hook。
useFileDialog useFileDialog React hook を使用してファイル入力に悩まされることなくファイルダイアログを開く
useInView 要素が viewport に入るか出るかを通知する Intersection Observer API の React 実装。
useIsTyping ユーザーが textarea または input 内で入力中かどうかを確認するための hook
useKeyCapture ⌨️ keyDown リスニングイベントを簡単にするシンプルな hook。
usePosition 要素の左上の位置を取得するための React hook。
useReducerWithEffects reducer と副作用を共存させる React Hook
useReducerWithLocalStorage useReducer hook にローカルストレージサポートを追加する React hook
useScreenType Bootstrap 4 グリッドのスクリーンサイズタイプを決定。
useScreenType 設定可能なブレークポイントサポート付きの現在のスクリーンタイプ（モバイル、タブレット、デスクトップ）を動的に取得する React hook。
useScrollSpy スクロール位置に基づいてナビゲーションを自動的に更新するための React hook。
useServiceWorker サービスワーカーを登録できる React hook
useValueAfter コンポーネントに異なるプロップを簡単に提供するためのシンプルな React hook（エッジケースのテストに便利）
useWaitForElements MutationObserver で要素がレンダリングされるのを待つためのシンプルな hook。
useWindowOrientation 現在のウィンドウ寸法に基づいて、ウィンドウの向き（縦向き vs 横向き）を返す hook
useWindowWidthBreakpoints （Bootstrap にインスパイアされた）ウィンドウ幅ブレークポイントを使用するための hook