Awesome React Hooks Resources
?⭐
?🍴
React Hooks RFC)
- 🌎 "Making Sense of React Hooks" by Dan Abramov
- 🌎 "From React.Component to hooks" by Octave Raimbault
- 🌎 "React Hooks: What’s going to happen to my tests?" by Kent C. Dodds
- 🌎 "State Management with React Hooks - No Redux or Context API" by André Gardi
- 🌎 "How to Fetch Data with React Hooks?" by Robin Wieruch
- 🌎 Primer on React Hooks
- 🌎 React Hooks - A deeper dive featuring useContext and useReducer
- 🌎 "Using Custom React Hooks to Simplify Forms" by James King
- 🌎 Testing of a Custom React Hook for Fetching Data with Axios
- 🌎 The Guide to Learning React Hooks (Examples & Tutorials) by Eric Bishard
- 🌎 "Sanely Testing React Hooks" by Dave Cooper
- 🌎 React by Example: Hooks
- 🌎 🎬 ReactConf 2018: React Today and Tomorrow by Sophie Alpert and Dan Abramov Official announcement and first demo.
- 🌎 🎬 ReactConf 2018: 90% Cleaner React by Ryan Florence
- 🌎 🎬 React Hooks: A Complete Introduction by Harry Wolff
- 🌎 🎬 React Hooks playlist by Ben Awad
- 🌎 🎬 React Hooks playlist by Josh Ribakoff
- 🌎 🎬 React Hooks playlist by Michael Chan
- 🌎 🎬 Custom Hooks in React by Tanner Linsley
- 🌎 React Hooks - Syntax (Nov 14th, 2018)
- 🌎 React Hooks 1 Year Later - Syntax (Mar 18, 2020)
- 🌎 Why should I use React Hooks? - Syntax (Dec 7th, 2020)
- 🌎
eslint-plugin-react-hooks
- 🌎
hooks.macro
Babel Macros for automatic memoization invalidation - 🌎 CodeSandbox Starter Kit
- 🌎 React Hooks Snippets for VS Code
47⭐
0🍴
hook-into-props
) Helper to build HOCs using hooks. Useful for using hooks with class components.188⭐
3🍴
react-universal-hooks
) React Universal Hooks: just use****** everywhere, Functional or Class Components84⭐
8🍴
Jooks) Unit-test your custom hooks by mocking React's Hooks API (useState, etc.)- 🌎
react-hooks-testing-library
Library to create unit tests for custom React hooks.
1884⭐
92🍴
@react-hookz/web) - A library of general-purpose React hooks built with care and SSR compatibility in mind.13832⭐
2672🍴
ahooks) A collection of React Hooks specifically aiming at enterprise applications.- 🌎 beautiful-react-hooks(🔥) A collection of hooks to speed-up your components and custom hooks development.
363⭐
38🍴
Captain hook) Modest list of hooks.216⭐
8🍴
crooks) A collection of unique React Hooks.137⭐
14🍴
hooks-by-example) Collection of beginner-friendly real world examples of hook usage.- 🌎 Hooks.guide Collection of React hooks curated by the community.
1017⭐
65🍴
react-recipes) 👩🍳 Collection of essential hook recipes 🥘- 🌎 Searchable Collection of React Hooks
498⭐
43🍴
Sunflower(🌻)) Collection of React Hooks returning components of antd.- 🌎 useHooks(🐠) One new React Hook recipe every day.
- 🌎 Use Hooks A collection of reusable React Hooks.
56⭐
7🍴
@21kb/react-hooks
) A set of React Hooks to get hooked on.19⭐
1🍴
@d2k/react-devto
) React hook for Dev.to API requests9⭐
2🍴
@d2k/react-github
) React hook for Github API requests14⭐
2🍴
@d2k/react-localstorage
) React hook that handles updating and clearing localstorage values while keeping them in sync with your components.219⭐
27🍴
@elgorditosalsero/react-gtm-hook
) React hook for handle easily the Google Tag Manager.1647⭐
107🍴
@hookstate/core
) Modern, very fast and extendable state management for React.11⭐
1🍴
@jzone/react-request-hook
) 🐶React hook for custom request,compatible with various lib, support redux?⭐
?🍴
@kevinwolf/formal
) Elegant form management primitives for the react hooks era.2948⭐
99🍴
@koale/useworker
) ⚙️ Running heavy task in background using web workers, without blocking the UI6⭐
0🍴
@marvelsq/use-properties-hook
) Instance functions inside FunctionComponent likeclass-properties
and equal inShallowCompare
238⭐
23🍴
@rehooks/component-size
) React hook for determining the size of a component.59⭐
8🍴
@rehooks/document-title
) React hook for updating the document-title.31⭐
3🍴
@rehooks/document-visibility
) React hook for subscribing to document visibility.112⭐
7🍴
@rehooks/input-value
) React hook for creating input values.577⭐
49🍴
@rehooks/local-storage
) React hook which syncslocalStorage[key]
with the comp.66⭐
3🍴
@rehooks/network-status
) React hook for getting network-status.123⭐
11🍴
@rehooks/online-status
) React Hook for Online status.82⭐
13🍴
@rehooks/window-scroll-position
) React hook for getting windowx
andy
position.131⭐
20🍴
@rehooks/window-size
) React hook for subscribing to window size.21⭐
3🍴
@rekindle/use-request
) 🤖 React hook for making request.17⭐
1🍴
@rkrupinski/use-state-machine
) A finite state machine hook.333⭐
11🍴
@staltz/use-profunctor-state
) React Hook for state management with Profunctor Optics34⭐
9🍴
@webscopeio/react-health-check
) 🏥 Lightweight React hook for checking health of API services.1268⭐
29🍴
@wellyshen/use-web-animations
) 🍿 React hook for highly-performant and manipulable animations using Web Animations API.59⭐
14🍴
@withvoid/melting-pot
) React hook utility library.46⭐
6🍴
ahooks/usetable
) A Progressive Solution for Query Table Scene.1317⭐
69🍴
concent
) State management that tailored for react, it is simple, predictable, progressive and efficient.3920⭐
89🍴
constate
) Transform your local state into global state usinguseContextState
anduseContextReducer
.9⭐
0🍴
conuse
) Share Hook with Context5030⭐
191🍴
easy-peasy
) Easy peasy global state for React.492⭐
25🍴
fetch-suspense
) React hook for the Fetch API with support for Suspense.1879⭐
91🍴
graphql-hooks
) Minimal hooks-first GraphQL client.2130⭐
90🍴
mobx-react-lite
) Lightweight React bindings for MobX based on experimental React hooks.213⭐
23🍴
modali
) A delightful modal dialog component for React, built from the ground up to support React Hooks.8⭐
1🍴
moment-hooks
) A library containing generic react hooks48⭐
7🍴
nice-hooks
) 🍹 A lot of nice hooks to make react hooks easier to use ( useState callback / life cycle / instance variable)53⭐
2🍴
promise-hook
) React hook for simplifying Promise based data fetching.503⭐
11🍴
reactive-react-redux
) React Redux binding with React Hooks and Proxy1178⭐
44🍴
react-async-hook
) React hook to fetch ad-hoc data into your React components.10⭐
0🍴
react-cached-callback
) React hooks for caching many callbacks by key, for example, in loops.19⭐
3🍴
react-context-refs
) React hooks for getting refs of elements via context.134⭐
14🍴
react-cookie
) React hooks for universal cookies.945⭐
20🍴
react-cool-dimensions
) 📏 React hook to measure an element's size and handle responsive components.248⭐
10🍴
react-cool-form
) 📋 React hooks for forms state and validation, less code more performant.549⭐
13🍴
react-cool-inview
) 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).549⭐
13🍴
react-cool-onclickoutside
) 🖱 React hook to listen for clicks outside of the component(s).740⭐
22🍴
react-cool-portal
) 🍒 React hook for Portals, which renders modals, dropdowns, tooltips etc. to or else.1210⭐
39🍴
react-cool-virtual
) ♻️ A tiny React hook for rendering large datasets like a breeze.77⭐
20🍴
react-countdown-hook
) Dead simple yet powerful countdown hook for React. Powered byrequestAnimationFrame
.280⭐
20🍴
react-darkreader
) 🌓 A React Hook for adding a dark / night mode to your site inspired by darkreader.0⭐
0🍴
react-declare-form
) React hook based declarative form library.4⭐
1🍴
react-deep-hooks
) React hooks for non-primitive dependencies.?⭐
?🍴
react-dom-status-hook
) React hook for subscribing to theDOMContentLoaded
event.69⭐
7🍴
react-enhanced-reducer-hook
) An alternative touseReducer
that accepts middlewares.347⭐
20🍴
react-fetch-hook
) React hook for conveniently use Fetch API.3572⭐
301🍴
react-firebase-hooks
) A collection of hooks for use with 🌎 Firebase.2⭐
0🍴
react-form-stateful
) Form library. Exposes dispatch to allow for the library to be extended through side effects.1935⭐
76🍴
react-hanger
) A small collection of utility hooks.120⭐
9🍴
react-hook-mighty-mouse
) React hook that tracks mouse events on selected element 🐭- 🌎
react-hook-mousetrap
A hook to trigger callbacks on keys or keys combos, powered by mousetrap. 86⭐
6🍴
react-hookedup
) A collection of useful React hooks.40889⭐
2044🍴
react-hook-form
) Form validation without the hassle.18⭐
1🍴
react-hook-layout
) Layout management in React.496⭐
27🍴
react-hooks-async
) React custom hooks for async functions with abortability and composability1099⭐
61🍴
react-hooks-global-state
) A simple global state management.19⭐
2🍴
react-hooks-image-size
) Hook to get natural image size from url.546⭐
27🍴
react-hooks-lib
) A set of reusable react hooks.199⭐
11🍴
react-hooks-svgdrawing
) A hooks to svg drawing.171⭐
21🍴
react-hooks-use-modal
) A hook to open the modal easily.29⭐
0🍴
react-hooks-visible
) A hook to element visibility. Uses the intersection observer API.700⭐
17🍴
react-hooks-worker
) React custom hooks for web workers2630⭐
115🍴
react-hotkey-hook
) React hook for hotkeys.- 🌎
react-i18next
Internationalization for react done right. 45⭐
2🍴
react-immer-hooks
) useState and useReducer using Immer to update state.6⭐
1🍴
react-indicative-hooks
) Hooks wrapping a data validation library called Indicative49⭐
4🍴
react-intersection-visible-hook
) React hook to track the visibility of a functional component.61⭐
8🍴
react-media-hook
) React hook for Media Queries.40⭐
9🍴
react-metatags-hook
) React Hook to manage html meta tags.252⭐
18🍴
react-native-react-bridge
) A React Native plugin to run React and handle communication between them.22⭐
0🍴
react-optimistic-ui-hook
) ⚛️ Minimal "optimistic UI" pattern implementation with a React hook4⭐
2🍴
react-page-name
) React Hook for managing the page title.20⭐
1🍴
react-peer-data
) React wrapper for PeerData library for files, media streaming/sharing using WebRTC.52⭐
6🍴
react-pirate
) React lifecycle and utilities hooks.100⭐
8🍴
react-powerhooks
) Hooks api for react-powerplug components.9⭐
1🍴
react-promiseful
) A React component and hook to render children conditionally based on a promise status.41451⭐
2813🍴
react-query
) Hooks for fetching, caching and updating asynchronous data in React.26⭐
7🍴
react-recaptcha-hook
) React hook for google-recaptcha v31017⭐
65🍴
react-recipes
) 👩🍳 Collection of essential hook recipes 🥘114⭐
6🍴
react-request-hook
) Managed, cancelable and safe-oriented api requests.6997⭐
297🍴
react-responsive
) React media query module.7⭐
4🍴
react-rocketjump
) Manage state and side effects like a breeze.69⭐
2🍴
react-screen-wake-lock
) React implementation of the Screen Wake Lock API. It provides a way to prevent devices from dimming or locking the screen when an application needs to keep running127⭐
21🍴
react-script-hook
) React hook to dynamically load an external script and know when its loaded85⭐
0🍴
react-selector-hooks
) Collection of hook-based memoized selector factories for declarations outside of render.236⭐
63🍴
react-speech-kit
) Hooks for browser Speech Recognition and Speech Synthesis.16⭐
2🍴
react-state-patterns
) Utility package for creating reusable implementations of React state provider patterns from hooks.1983⭐
146🍴
react-swipeable
) React swipe event handler hook.2696⭐
72🍴
react-tracked
) Simple and fast global state with React Context. Eliminate unnecessary re-renders without hassle.6⭐
2🍴
react-uniformed
) 🚀 Declarative React forms using hooks.62⭐
5🍴
react-use-api
) Async HTTP request data for axios. Designed for diverse UI states, SSR and data pre-caching.5⭐
0🍴
react-use-browser
) A hook enabling client side hydration of Server-Side-Rendered components when server-produced markup needs to differ from the final client application markup.54⭐
1🍴
react-use-calendar
) A hook for implementing a calendar with events.266⭐
15🍴
react-use-clipboard
) A hook that copies text to a user's clipboard.7⭐
0🍴
react-use-d3
) A React hook to use D3.23⭐
2🍴
react-use-data-loader
) React hook for loading data3⭐
1🍴
react-use-fetch-factory
) React hook that takes care of fetching and selecting data with redux.?⭐
?🍴
react-use-fetch-with-redux
) React hook that caches API requests that works with redux.938⭐
55🍴
react-use-form-state
) React hook for managing form and inputs state.4⭐
1🍴
react-use-id-hook
) React hook for generating SSR-safe unique id strings.43⭐
6🍴
react-use-idb
) React hook for storing value in the browser usingindexDB
.16⭐
2🍴
react-use-infinite-loader
) ♾️ 📃 ⏳ Super lightweight infinite loading (scroll) hook for React apps6⭐
0🍴
react-use-input
) 🎣 A hook whose setter can be directly given to HTML inputs15⭐
0🍴
react-use-lazy-load-image
) 🌅 ⚡ Add image lazy loading to your React app with ease10⭐
1🍴
react-use-message-bar
) A simple React hook for message bars.21⭐
8🍴
react-use-modal
) React hook for manage modal.20⭐
0🍴
react-use-path
) The tiniest hook style react router.46⭐
4🍴
react-use-scroll-position
) React hook for using the scroll position.26⭐
1🍴
react-use-trigger
) React hook for trigger effect from any place of code3⭐
0🍴
react-use-watch
) A React hook about triggers once only when dependencies have changed.5⭐
1🍴
react-use-wavelet
) React hooks for connecting to the Wavelet smart-contract platform41385⭐
3125🍴
react-use
) Collection of essential hooks.50⭐
3🍴
react-useFormless
) React hook to handle forms state.19⭐
2🍴
react-usemiddleware
) React hook for using existing Redux middlewares (like thunk or saga) withuseReducer
.892⭐
34🍴
react-useportal
) 🌀 usePortal, React hook for Portals21⭐
3🍴
react-user-media
) React wrapper fornavigator.getUserMedia
.305⭐
30🍴
react-wait
) Complex Loader Management Hook for React Applications.93⭐
3🍴
react-window-communication-hook
) React hook to communicate among browser contexts (tabs, windows, iframes).152⭐
11🍴
react-with-hooks
) Ponyfill for the proposed React Hooks API.?⭐
?🍴
reaktion
) useState like hook for global state management.145⭐
11🍴
redhooks
) Global state management with React Hooks. It also supports the use of middleware like redux-thunk or redux-saga or your own custom middleware.38⭐
2🍴
redux-react-hook
) React hook for accessing mapped state from a Redux store.114⭐
5🍴
region-core
) A global state management framework with a hookuseProps
.13⭐
0🍴
rehooks-visibility-sensor
) It checks whether an element has scrolled into view or not.18⭐
1🍴
resynced
) Multiple state management using React Hooks API.- 🌎
reto
Flexible and efficient React store with hooks. 14⭐
0🍴
rrh
) Super Simple React Hooks for react-redux.2180⭐
83🍴
rxjs-hooks
) An easy way to use RxJS v6+ with react hooks.142⭐
8🍴
scroll-data-hook
) Returns information about scroll speed, distance, direction and more.14⭐
1🍴
style-hook
) 🎨 wirte css in js with react hooks.30143⭐
1205🍴
swr
) React Hooks library for remote data fetching.4406⭐
118🍴
the-platform
) Browser API's turned into React Hooks and Suspense-friendly React elements for common situations.302⭐
6🍴
trousers
) 👖 A hooks-first CSS-in-JS library, focused on semantics and runtime performance158⭐
6🍴
use-abortable-fetch
) React hook that does a fetch and aborts when the components is unloaded or a different request is made.15⭐
1🍴
use-action
) Almost same to useEffect, but not deferred.65⭐
1🍴
use-as-bind
) React hook for using as-bind with a WASM source.142⭐
9🍴
use-async-memo
) React hook for generating async memoized data.7⭐
0🍴
use-autocomplete
) A React hook for returning autocomplete values for a search string within an array.32⭐
9🍴
use-axios-react
) React CRUD hooks for axios, comprehensive list of examples11⭐
0🍴
use-boolean
) Convenient helpers for handling boolean state.3⭐
1🍴
use-browser-history
) A React hook to handle browser history events.33⭐
7🍴
use-cart
) A React hook that gives you shopping cart functionality.79⭐
2🍴
use-click-away
) React hook when you want a callback invoked when a DOM element was not clicked.180⭐
11🍴
use-clippy
) A React hook to reading from and writing to the user's clipboard.2590⭐
58🍴
use-context-selector
) React useContextSelector hook in userland.3⭐
0🍴
use-controlled-input-number
) React hook to turn numeric input behavior into pretty much what you expect.25⭐
2🍴
use-countries
) Custom react hook to list countries and languages.2898⭐
114🍴
use-debounce
) A debounce (and throttle) hook for React.220⭐
6🍴
use-deep-compare
) It's react's useEffect/useMemo/useCallback hooks, except using deep comparison on the inputs.1872⭐
84🍴
use-deep-compare-effect
) 🐋 It's react's useEffect hook, except using deep comparison on the inputs, not reference equality.58⭐
2🍴
use-detect-print
) React hook to detect when a page is being printed.32⭐
3🍴
use-dimensions
) React Native hook for getting screen and window dimensions.19⭐
1🍴
use-double-click
) React hook for continuous double-clicks and combining click and double-click events57⭐
7🍴
use-eazy-auth
) React hooks for handle auth stuff.493⭐
16🍴
use-events
) A set of React Hooks to handle mouse events.182⭐
11🍴
use-force-update
) React hook for forcing re-render of a functional Component.18⭐
2🍴
use-hotkeys
) HotKeys.js React Hook that listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts.13⭐
0🍴
use-hovering
) Simple, accessible React hook for tracking hover state.2310⭐
113🍴
use-http
) 🐶 useFetch, React hook for making isomorphic http requests.3954⭐
90🍴
use-immer
) A hook to use27437⭐
850🍴
immer) to manipulate state.3⭐
0🍴
use-input-file
) React hook for creating input file.44⭐
5🍴
use-is-mounted-ref
)useIsMountedRef
is a React Hook to check when the component is mounted.1⭐
1🍴
use-lang-direction
) A hook that reads the HTML element'sdir
attribute value and any updates to that value allowing you to update your UI accordingly.123⭐
11🍴
use-last-fm
) A hook to show your current playing song from Spotify or any other site 🌎 last.fm supports in realtime. ♪272⭐
20🍴
use-lilius
) A headless calendar hook for React.520⭐
24🍴
use-media
) CSS media queries with React hook.23⭐
3🍴
use-mouse-action
) React Hooks to listen to both mouse down or up and click events with a once called function.8⭐
1🍴
use-multiselect
) Manage multiselect state.28⭐
5🍴
use-overflow
) A React Hook that allows you to detect X and Y overflow1247⭐
63🍴
use-places-autocomplete
) 📍 React hook for Google Maps Places Autocomplete.37⭐
10🍴
use-popper
) React hook wrapper around Popper.js.2143⭐
95🍴
use-query-params
) A React Hook for managing state in URL query parameters with easy serialization.80⭐
4🍴
use-react-modal
) 🖼 useModal, React hook for Modals/Dialogs/Lightboxes568⭐
30🍴
use-react-router
) React Hook for pub-sub behavior using React Router.13⭐
0🍴
use-reactive-state
)useReactiveState()
- a reactive alternative to React'suseState()
.178⭐
9🍴
use-reducer-async
) React useReducer with async actions62⭐
4🍴
use-redux
) A hook to bind 🌎 redux.?⭐
?🍴
use-scroller
) React hook that automatically adds the next page, saving users from a full page load.107⭐
4🍴
use-scroll-to-bottom
) React hook for detecting when an element was scrolled to bottom.30⭐
1🍴
use-simple-undo
) Simple implementation of undo/redo functionality.197⭐
26🍴
server-push-hooks
) 🔥 React hooks for 🌎 socket.io, 🌎 SEE and more to come50⭐
10🍴
use-socket.io-client
) React hook for socket.io-client, manipulate 🌎 socket.io client without any side effect.138⭐
10🍴
use-sse
) ✨useSSE - use Server-Side Effect.useEffect
both on client and server side.261⭐
7🍴
use-ssr
) ☯️ React hook to determine if you are on the server, browser, or react native.11⭐
2🍴
use-state-snapshots
) A React hook to keep track of state changes for undo/redo functionality.99⭐
1🍴
use-substate
) React hook for subscribing to your single app state (works with your current 🌎 Redux app).17⭐
0🍴
use-suspender
) Execute asynchronous actions with 🌎React.Suspense
43⭐
2🍴
use-t
) Multi-language using hooks.393⭐
22🍴
use-undo
) React hook to implement Undo and Redo functionality.10⭐
1🍴
use-videocard
) React hook to fetch the graphics card information of the client using canvas1⭐
0🍴
use-window-blur-change-title
) React Hook for set the page title when the user is shifting focus away from the current window.1284⭐
99🍴
useDarkMode
) A custom React Hook to help you implement a "dark mode" component.3⭐
0🍴
useDeferredState
) A React hook for deferring state change. That's essential when your UI needs to wait for disappearing animation is complete to unmount component.4⭐
0🍴
useDropZone
) React hook that allows you to set simple drag and drop functionality.37⭐
4🍴
useEmailAutocomplete
) 📬 React hook for email autocomplete inputs.6⭐
2🍴
useFileDialog
) Open file dialog without struggling with file input using useFileDialog react hook4979⭐
182🍴
useInView
) React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.9⭐
1🍴
useIsTyping
) Hook to see if the user is typing within a textarea or input24⭐
2🍴
useKeyCapture
) ⌨️ A simple hook to make keyDown listening event easier.23⭐
4🍴
usePosition
) React hook to get position top left of an element.?⭐
?🍴
useReducerWithEffects
) React Hook that colocates reducer and side effects0⭐
0🍴
useReducerWithLocalStorage
) React hook that adds local storage support to theuseReducer
hook15⭐
1🍴
useScreenType
) Determining screen size type for Bootstrap 4 grid.12⭐
8🍴
useScreenType
) React hook to dynamically get current screen type (mobile, tablet, desktop) with configurable breakpoint support.318⭐
18🍴
useScrollSpy
) React hook to automatically update navigation based on scroll position.15⭐
6🍴
useServiceWorker
) A React hook which can register a service worker2⭐
0🍴
useValueAfter
) Very simple React hook to easily provide different props to a component (comes in handy for testing edge cases)2⭐
0🍴
useWaitForElements
) A simple hook to wait for elements to be rendered with MutationObserver.5⭐
1🍴
useWindowOrientation
) A hook returning the window's orientation (portrait vs. landscape) based off of current window dimensions7⭐
0🍴
useWindowWidthBreakpoints
) A hook for using (Bootstrap-inspired) window width breakpoints
9795⭐
780🍴
rehooks/awesome-react-hooks)