203 lines
9.3 KiB
HTML
203 lines
9.3 KiB
HTML
<h1 id="awesome-react-hooks-awesome">Awesome React Hooks <a
|
||
href="https://awesome.re"><img src="https://awesome.re/badge-flat.svg"
|
||
alt="Awesome" /></a></h1>
|
||
<p><a
|
||
href="https://reactjs.org/docs/hooks-intro.html"><img src="https://user-images.githubusercontent.com/15311858/47717137-ab421180-dc23-11e8-9ee8-a0de40260113.png"></a></p>
|
||
<p>A curated list about React Hooks.</p>
|
||
<blockquote>
|
||
<p><em>Hooks are a new addition in React 16.8. They let you use state
|
||
and other React features without writing a class.</em></p>
|
||
</blockquote>
|
||
<h2 id="contents">Contents</h2>
|
||
<ul>
|
||
<li><a href="#hooks">Hooks</a></li>
|
||
<li><a
|
||
href="#tutorialsarticlesworkshops">Tutorials/Articles/Workshops</a></li>
|
||
<li><a href="#discussions">Discussions</a></li>
|
||
<li><a href="#examples">Examples</a></li>
|
||
<li><a href="#extensionslibraries">Extensions/Libraries</a></li>
|
||
</ul>
|
||
<h2 id="hooks">Hooks</h2>
|
||
<ul>
|
||
<li><a href="https://reactjs.org/docs/hooks-intro.html">Introducing
|
||
Hooks</a></li>
|
||
<li><a href="https://reactjs.org/docs/hooks-overview.html">Hooks at a
|
||
Glance</a></li>
|
||
<li><a href="https://reactjs.org/docs/hooks-state.html">Using the State
|
||
Hook</a></li>
|
||
<li><a href="https://reactjs.org/docs/hooks-effect.html">Using the
|
||
Effect Hook</a></li>
|
||
<li><a href="https://reactjs.org/docs/hooks-rules.html">Rules of
|
||
Hooks</a></li>
|
||
<li><a href="https://reactjs.org/docs/hooks-custom.html">Building Your
|
||
Own Hooks</a></li>
|
||
<li><a href="https://reactjs.org/docs/hooks-reference.html">Hooks API
|
||
Reference</a></li>
|
||
<li><a href="https://reactjs.org/docs/hooks-faq.html">Hooks FAQ</a></li>
|
||
</ul>
|
||
<h2 id="tutorialsarticlesworkshops">Tutorials/Articles/Workshops</h2>
|
||
<ul>
|
||
<li><a href="https://www.youtube.com/watch?v=dpw9EHDh2bM">React Today
|
||
and Tomorrow and 90% Cleaner React</a> - Dan Abramov and Sophie
|
||
Alpert.</li>
|
||
<li><a
|
||
href="https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889">Making
|
||
Sense of React Hooks</a> - Dan Abramov.</li>
|
||
<li><a
|
||
href="https://egghead.io/playlists/react-hooks-and-suspense-650307f2">React
|
||
Hooks and Suspense</a> - Kent C. Dodds.</li>
|
||
<li><a href="https://youtu.be/JQeB9miT9Wc">React Hooks & testing:
|
||
Stepping through React code</a> - Kent C. Dodds.</li>
|
||
<li><a href="https://youtu.be/gmF4k6P2va8">My Thoughts on React
|
||
Hooks</a> - Ben Awad.</li>
|
||
<li><a href="https://youtu.be/k0WnY0Hqe5c">Fetching Data from an API
|
||
with React Hooks useEffect</a> - Ben Awad.</li>
|
||
<li><a href="https://youtu.be/tKRWuVOEB2w">Are React Hooks Slower than
|
||
Class Components?</a> - Ben Awad.</li>
|
||
<li><a href="https://youtu.be/cAZ-fOd1RpA">Building a Todo List with
|
||
React Hooks useState</a> - Ben Awad.</li>
|
||
<li><a href="https://youtu.be/vbaIZ3xMj9U">Using React Hooks vs. Class
|
||
Components</a> - Ben Awad.</li>
|
||
<li><a href="https://youtu.be/FmKjwh34Rn8">Using Immer with Reducers and
|
||
React Hooks</a> - Ben Awad.</li>
|
||
<li><a href="https://youtu.be/xWXxkFzgnFM">React Hooks useContext</a> -
|
||
Ben Awad.</li>
|
||
<li><a
|
||
href="https://medium.com/@vcarl/everything-you-need-to-know-about-react-hooks-8f680dfd4349">Everything
|
||
you need to know about React Hooks</a> - Carl Vitullo.</li>
|
||
<li><a
|
||
href="https://medium.com/@drcmda/hooks-in-react-spring-a-tutorial-c6c436ad7ee4">Hooks
|
||
in react-spring, a tutorial</a> - Paul Henschel.</li>
|
||
<li><a
|
||
href="https://medium.com/@tomaskonrady/react-hooks-notes-taken-c42376af3ab0">React
|
||
Hooks: Notes Taken</a> - Tomáš Konrády.</li>
|
||
<li><a
|
||
href="https://scotch.io/tutorials/getting-started-with-react-hooks">Getting
|
||
Started with React Hooks</a> - Chris Sevilleja.</li>
|
||
<li><a
|
||
href="https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e">React
|
||
hooks: not magic, just arrays</a> - Rudi Yardley.</li>
|
||
<li><a
|
||
href="https://itnext.io/why-reacts-hooks-api-is-a-game-changer-8731c2b0a8c">Why
|
||
React’s new Hooks API is a game changer</a> - Rudi Yardley.</li>
|
||
<li><a
|
||
href="https://medium.com/open-graphql/react-hooks-for-graphql-3fa8ebdd6c62">Writing
|
||
Custom React Hooks for GraphQL</a> - Nader Dabit.</li>
|
||
<li><a
|
||
href="https://medium.com/@Charles_Stover/manage-global-state-with-react-hooks-6065041b55b4">Manage
|
||
global state with React Hooks</a> - Charles Stover.</li>
|
||
<li><a
|
||
href="https://medium.com/@rossbulat/react-hooks-managing-web-sockets-with-useeffect-and-usestate-2dfc30eeceec">React
|
||
Hooks: Managing Web Sockets with useEffect and useState</a> - Ross
|
||
Bulat.</li>
|
||
<li><a href="https://testdriven.io/blog/react-hooks-primer/">Primer on
|
||
React Hooks</a> - Austin Johnston.</li>
|
||
<li><a href="https://testdriven.io/blog/react-hooks-advanced/">React
|
||
Hooks - A deeper dive featuring useContext and useReducer</a> - Austin
|
||
Johnston.</li>
|
||
<li><a
|
||
href="https://github.com/kentcdodds/advanced-react-hooks">Advanced React
|
||
Hooks Workshop</a> - Kent C. Dodds.</li>
|
||
</ul>
|
||
<h2 id="discussions">Discussions</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/reduxjs/react-redux/pull/1065">v6
|
||
Candidate Preview: Use React Hooks for connect</a> - Mark Erikson.</li>
|
||
<li><a href="https://github.com/reactjs/rfcs/pull/68">RFC: React
|
||
Hooks</a> - Sebastian Markbåge.</li>
|
||
<li><a
|
||
href="https://github.com/facebook/react-native/issues/21967#issuecomment-434113687">Using
|
||
Hooks in React Native</a> - Héctor Ramos.</li>
|
||
</ul>
|
||
<h2 id="examples">Examples</h2>
|
||
<ul>
|
||
<li><a href="https://codesandbox.io/s/jjy215l7w3">Color Match</a> -
|
||
Color Match Game.</li>
|
||
<li><a
|
||
href="https://codesandbox.io/s/yjn90lzwrx?module=%2Fsrc%2FApp.js">React
|
||
Hooks counter</a> - Counter using useState of React Hooks.</li>
|
||
<li><a href="https://codesandbox.io/s/m449vyk65x">Toggle component</a> -
|
||
Toggle component made with React Hooks.</li>
|
||
<li><a href="https://github.com/jacobp100/hooks-test">Hooks test</a> -
|
||
Somewhat complicated use case solved relatively nicely with React
|
||
Hooks.</li>
|
||
<li><a href="https://github.com/kitze/react-hanger">React Hanger</a> -
|
||
React Hanger example.</li>
|
||
<li><a
|
||
href="https://github.com/react-navigation/react-navigation-hooks">React
|
||
Navigation Hooks</a> - React hooks for convenient react-navigation
|
||
use.</li>
|
||
<li><a href="https://github.com/matthewp/haunted">Haunted</a> - React’s
|
||
Hooks API implemented for web components.</li>
|
||
<li><a href="https://usehooks.com/">useHooks</a> - Easy to understand
|
||
React Hook recipes by <a href="https://twitter.com/gabe_ragland">Gabe
|
||
Ragland</a>.</li>
|
||
<li><a href="https://nikgraf.github.io/react-hooks/">Collection of React
|
||
Hooks</a> - Collection of React Hooks.</li>
|
||
<li><a href="https://codesandbox.io/s/ppxnl191zx">React Spring demo</a>
|
||
- Demo of how react-spring could use React Hooks as a new API.</li>
|
||
<li><a href="https://codesandbox.io/s/yq5qowzrvz">React Hooks</a> -
|
||
React Hooks useState() and useEffect().</li>
|
||
<li><a href="https://codesandbox.io/s/9kwyzy0y4">Hooks Todo App</a> -
|
||
App made with React Hooks.</li>
|
||
<li><a href="https://github.com/codeshifu/react-thanos">react-thanos</a>
|
||
- React hooks implementation of Google’s Thanos easter egg.</li>
|
||
</ul>
|
||
<h2 id="extensionslibraries">Extensions/Libraries</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/facebookincubator/redux-react-hook">redux-react-hook</a>
|
||
- React Hook for accessing state and dispatch from a Redux store.</li>
|
||
<li><a href="https://github.com/streamich/react-use">react-use</a> -
|
||
Collection of essential React Hooks.</li>
|
||
<li><a href="https://github.com/palmerhq/the-platform">The Platform</a>
|
||
- Browser API’s turned into React Hooks and Suspense-friendly React
|
||
elements for common situations.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/eslint-plugin-react-hooks">eslint-plugin-react-hooks</a>
|
||
- This plugin enforce rule of hooks to avoid common mistakes.</li>
|
||
<li><a
|
||
href="https://github.com/beizhedenglong/react-hooks-lib">react-hooks-lib</a>
|
||
- A set of reusable React Hooks.</li>
|
||
<li><a href="https://github.com/mweststrate/use-immer">use-immer</a> - A
|
||
hook to use immer as a React hook to manipulate state.</li>
|
||
<li><a href="https://github.com/kitze/react-hanger">react-hanger</a> - A
|
||
small collection of useful hooks for React 16.7.</li>
|
||
<li><a
|
||
href="https://github.com/csfrequency/react-firebase-hooks">react-firebase-hooks</a>
|
||
- A set of reusable React Hooks for Firebase.</li>
|
||
<li><a
|
||
href="https://github.com/AvraamMavridis/react-intersection-visible-hook">react-intersection-visible-hook</a>
|
||
- React hook to track the visibility of a functional component based on
|
||
IntersectionVisible Observer.</li>
|
||
<li><a
|
||
href="https://github.com/thibaultboursier/use-timer">use-timer</a> -
|
||
Simple React hook to handle timer.</li>
|
||
<li><a
|
||
href="https://github.com/react-native-community/react-native-hooks">react-native-hooks</a>
|
||
- React Native APIs turned into React Hooks for use in stateless React
|
||
components.</li>
|
||
<li><a
|
||
href="https://github.com/yesmeck/react-with-hooks">react-with-hooks</a>
|
||
- Ponyfill for the proposed React Hooks API.</li>
|
||
<li><a
|
||
href="https://github.com/pankod/react-hooks-screen-type">react-hooks-screen-type</a>
|
||
- Determining screen size type for Bootstrap 4 grid.</li>
|
||
<li><a href="https://github.com/alex-cory/react-usefetch">use-http</a> -
|
||
React hooks for making isomorphic HTTP requests.</li>
|
||
<li><a
|
||
href="https://github.com/ilyalesik/react-fetch-hook">react-fetch-hook</a>
|
||
- React hook for conveniently use Fetch API.</li>
|
||
<li><a href="https://github.com/storeon/storeon">storeon</a> -
|
||
hook-based state manager in 173 bytes.</li>
|
||
<li><a
|
||
href="https://github.com/bluebill1049/react-hook-form">react-hook-form</a>
|
||
- Performance, flexible and extensible forms with easy to use for
|
||
validation.</li>
|
||
</ul>
|
||
<h2 id="license">License</h2>
|
||
<p>Awesome React hooks is <a href="/LICENSE.md">CC0 licensed</a>.</p>
|
||
<p><a
|
||
href="https://github.com/glauberfc/awesome-react-hooks">reacthooks.md
|
||
Github</a></p>
|