Awesome React Hooks
React Hooksを扱う資料や関連プロジェクトをまとめたAwesomeリストです。
目次
Hooks
- Introducing Hooks
- Hooks at a Glance
- Using the State Hook
- Using the Effect Hook
- Rules of Hooks
- Building Your Own Hooks
- Hooks API Reference
- Hooks FAQ
チュートリアル・記事・ワークショップ
- React Today and Tomorrow and 90% Cleaner React - Dan Abramov と Sophie Alpert。
- Making Sense of React Hooks - Dan Abramov。
- React Hooks and Suspense - Kent C. Dodds。
- React Hooks & testing: Stepping through React code - Kent C. Dodds。
- My Thoughts on React Hooks - Ben Awad。
- Fetching Data from an API with React Hooks useEffect - Ben Awad。
- Are React Hooks Slower than Class Components? - Ben Awad。
- Building a Todo List with React Hooks useState - Ben Awad。
- Using React Hooks vs. Class Components - Ben Awad。
- Using Immer with Reducers and React Hooks - Ben Awad。
- React Hooks useContext - Ben Awad。
- Everything you need to know about React Hooks - Carl Vitullo。
- Hooks in react-spring, a tutorial - Paul Henschel。
- React Hooks: Notes Taken - Tomáš Konrády。
- Getting Started with React Hooks - Chris Sevilleja。
- React hooks: not magic, just arrays - Rudi Yardley。
- Why React’s new Hooks API is a game changer - Rudi Yardley。
- Writing Custom React Hooks for GraphQL - Nader Dabit。
- Manage global state with React Hooks - Charles Stover。
- React Hooks: Managing Web Sockets with useEffect and useState - Ross Bulat。
- Primer on React Hooks - Austin Johnston。
- React Hooks - A deeper dive featuring useContext and useReducer - Austin Johnston。
- Advanced React Hooks Workshop - Kent C. Dodds。
議論
- v6 Candidate Preview: Use React Hooks for connect - Mark Erikson。
- RFC: React Hooks - Sebastian Markbåge。
- Using Hooks in React Native - Héctor Ramos。
例
- Color Match - Color Match ゲーム。
- React Hooks counter - React Hooks の useState を使うカウンター。
- Toggle component - React Hooks で作ったトグルコンポーネント。
- Hooks test - React Hooks を使って比較的きれいに解決した、やや複雑なユースケース。
- React Hanger - React Hanger の例。
- React Navigation Hooks - react-navigation を便利に使うための React hooks。
- Haunted - Web Components 向けに実装した React の Hooks API。
- useHooks - Gabe Ragland による理解しやすい React Hook レシピ。
- Collection of React Hooks - React Hooks のコレクション。
- React Spring demo - react-spring が新しい API として React Hooks を使用する方法のデモ。
- React Hooks - React Hooks の useState() と useEffect()。
- Hooks Todo App - React Hooks で作られたアプリ。
- react-thanos - Google の Thanos イースターエッグを React hooks で実装したもの。
拡張・ライブラリ
- redux-react-hook - Redux ストアから state と dispatch にアクセスするための React Hook。
- react-use - 必須の React Hooks のコレクション。
- The Platform - よくある状況に使える、React Hooks と Suspense 対応 React 要素に変換したブラウザー API。
- eslint-plugin-react-hooks - よくある誤りを避けるため Hooks のルールを強制するプラグイン。
- react-hooks-lib - 再利用可能な React Hooks のセット。
- use-immer - state を操作するために immer を React hook として使うフック。
- react-hanger - React 16.7 向けの便利な hooks の小さなコレクション。
- react-firebase-hooks - Firebase 向けの再利用可能な React Hooks のセット。
- react-intersection-visible-hook - IntersectionVisible Observer に基づき、関数コンポーネントの可視性を追跡する React hook。
- use-timer - タイマーを扱うためのシンプルな React hook。
- react-native-hooks - ステートレスな React コンポーネントで使える React Hooks に変換した React Native API。
- react-with-hooks - 提案されている React Hooks API の Ponyfill。
- react-hooks-screen-type - Bootstrap 4 グリッド向けの画面サイズタイプ判定。
- use-http - アイソモーフィックな HTTP リクエストを行う React hooks。
- react-fetch-hook - Fetch API を便利に使うための React hook。
- storeon - 173 バイトの hook ベース状態マネージャー。
- react-hook-form - 使いやすいバリデーション機能を持つ、高性能で柔軟かつ拡張可能なフォーム。
ライセンス
Awesome React hooks は CC0 ライセンスです。