Awesome React Hooks Resources
- "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)
hooks.macroBabel Macros for automatic memoization invalidation
- CodeSandbox Starter Kit
- React Hooks Snippets for VS Code
hook-into-propsHelper to build HOCs using hooks. Useful for using hooks with class components.
react-universal-hooksReact Universal Hooks: just use****** everywhere, Functional or Class Components
- Jooks Unit-test your custom hooks by mocking React's Hooks API (useState, etc.)
react-hooks-testing-libraryLibrary to create unit tests for custom React hooks.
- @react-hookz/web - A library of general-purpose React hooks built with care and SSR compatibility in mind.
- 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.
- Captain hook Modest list of hooks.
- crooks A collection of unique React Hooks.
- hooks-by-example Collection of beginner-friendly real world examples of hook usage.
- Hooks.guide Collection of React hooks curated by the community.
- react-recipes 👩🍳 Collection of essential hook recipes 🥘
- Searchable Collection of React Hooks
- 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.
@21kb/react-hooksA set of React Hooks to get hooked on.
@d2k/react-devtoReact hook for Dev.to API requests
@d2k/react-githubReact hook for Github API requests
@d2k/react-localstorageReact hook that handles updating and clearing localstorage values while keeping them in sync with your components.
@elgorditosalsero/react-gtm-hookReact hook for handle easily the Google Tag Manager.
@hookstate/coreModern, very fast and extendable state management for React.
@jzone/react-request-hook🐶React hook for custom request，compatible with various lib, support redux
@kevinwolf/formalElegant form management primitives for the react hooks era.
@koale/useworker⚙️ Running heavy task in background using web workers, without blocking the UI
@marvelsq/use-properties-hookInstance functions inside FunctionComponent like
class-propertiesand equal in
@rehooks/component-sizeReact hook for determining the size of a component.
@rehooks/document-titleReact hook for updating the document-title.
@rehooks/document-visibilityReact hook for subscribing to document visibility.
@rehooks/input-valueReact hook for creating input values.
@rehooks/local-storageReact hook which syncs
localStorage[key]with the comp.
@rehooks/network-statusReact hook for getting network-status.
@rehooks/online-statusReact Hook for Online status.
@rehooks/window-scroll-positionReact hook for getting window
@rehooks/window-sizeReact hook for subscribing to window size.
@rekindle/use-request🤖 React hook for making request.
@rkrupinski/use-state-machineA finite state machine hook.
@staltz/use-profunctor-stateReact Hook for state management with Profunctor Optics
@webscopeio/react-health-check🏥 Lightweight React hook for checking health of API services.
@wellyshen/use-web-animations🍿 React hook for highly-performant and manipulable animations using Web Animations API.
@withvoid/melting-potReact hook utility library.
ahooks/usetableA Progressive Solution for Query Table Scene.
concentState management that tailored for react, it is simple, predictable, progressive and efficient.
constateTransform your local state into global state using
conuseShare Hook with Context
easy-peasyEasy peasy global state for React.
fetch-suspenseReact hook for the Fetch API with support for Suspense.
graphql-hooksMinimal hooks-first GraphQL client.
mobx-react-liteLightweight React bindings for MobX based on experimental React hooks.
modaliA delightful modal dialog component for React, built from the ground up to support React Hooks.
moment-hooksA library containing generic react hooks
nice-hooks🍹 A lot of nice hooks to make react hooks easier to use ( useState callback / life cycle / instance variable)
promise-hookReact hook for simplifying Promise based data fetching.
reactive-react-reduxReact Redux binding with React Hooks and Proxy
react-async-hookReact hook to fetch ad-hoc data into your React components.
react-cached-callbackReact hooks for caching many callbacks by key, for example, in loops.
react-context-refsReact hooks for getting refs of elements via context.
react-cookieReact hooks for universal cookies.
react-cool-dimensions📏 React hook to measure an element's size and handle responsive components.
react-cool-form📋 React hooks for forms state and validation, less code more performant.
react-cool-inview🖥️ React hook to monitor an element enters or leaves the viewport (or another element).
react-cool-onclickoutside🖱 React hook to listen for clicks outside of the component(s).
react-cool-portal🍒 React hook for Portals, which renders modals, dropdowns, tooltips etc. to or else.
react-cool-virtual♻️ A tiny React hook for rendering large datasets like a breeze.
react-countdown-hookDead simple yet powerful countdown hook for React. Powered by
react-darkreader🌓 A React Hook for adding a dark / night mode to your site inspired by darkreader.
react-declare-formReact hook based declarative form library.
react-deep-hooksReact hooks for non-primitive dependencies.
react-dom-status-hookReact hook for subscribing to the
react-enhanced-reducer-hookAn alternative to
useReducerthat accepts middlewares.
react-fetch-hookReact hook for conveniently use Fetch API.
react-firebase-hooksA collection of hooks for use with Firebase.
react-form-statefulForm library. Exposes dispatch to allow for the library to be extended through side effects.
react-hangerA small collection of utility hooks.
react-hook-mighty-mouseReact hook that tracks mouse events on selected element 🐭
react-hook-mousetrapA hook to trigger callbacks on keys or keys combos, powered by mousetrap.
react-hookedupA collection of useful React hooks.
react-hook-formForm validation without the hassle.
react-hook-layoutLayout management in React.
react-hooks-asyncReact custom hooks for async functions with abortability and composability
react-hooks-global-stateA simple global state management.
react-hooks-image-sizeHook to get natural image size from url.
react-hooks-libA set of reusable react hooks.
react-hooks-svgdrawingA hooks to svg drawing.
react-hooks-use-modalA hook to open the modal easily.
react-hooks-visibleA hook to element visibility. Uses the intersection observer API.
react-hooks-workerReact custom hooks for web workers
react-hotkey-hookReact hook for hotkeys.
react-i18nextInternationalization for react done right.
react-immer-hooksuseState and useReducer using Immer to update state.
react-indicative-hooksHooks wrapping a data validation library called Indicative
react-intersection-visible-hookReact hook to track the visibility of a functional component.
react-media-hookReact hook for Media Queries.
react-metatags-hookReact Hook to manage html meta tags.
react-native-react-bridgeA React Native plugin to run React and handle communication between them.
react-optimistic-ui-hook⚛️ Minimal "optimistic UI" pattern implementation with a React hook
react-page-nameReact Hook for managing the page title.
react-peer-dataReact wrapper for PeerData library for files, media streaming/sharing using WebRTC.
react-pirateReact lifecycle and utilities hooks.
react-powerhooksHooks api for react-powerplug components.
react-promisefulA React component and hook to render children conditionally based on a promise status.
react-queryHooks for fetching, caching and updating asynchronous data in React.
react-recaptcha-hookReact hook for google-recaptcha v3
react-recipes👩🍳 Collection of essential hook recipes 🥘
react-request-hookManaged, cancelable and safe-oriented api requests.
react-responsiveReact media query module.
react-rocketjumpManage state and side effects like a breeze.
react-screen-wake-lockReact 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 running
react-script-hookReact hook to dynamically load an external script and know when its loaded
react-selector-hooksCollection of hook-based memoized selector factories for declarations outside of render.
react-speech-kitHooks for browser Speech Recognition and Speech Synthesis.
react-state-patternsUtility package for creating reusable implementations of React state provider patterns from hooks.
react-swipeableReact swipe event handler hook.
react-trackedSimple and fast global state with React Context. Eliminate unnecessary re-renders without hassle.
react-uniformed🚀 Declarative React forms using hooks.
react-use-apiAsync HTTP request data for axios. Designed for diverse UI states, SSR and data pre-caching.
react-use-browserA hook enabling client side hydration of Server-Side-Rendered components when server-produced markup needs to differ from the final client application markup.
react-use-calendarA hook for implementing a calendar with events.
react-use-clipboardA hook that copies text to a user's clipboard.
react-use-d3A React hook to use D3.
react-use-data-loaderReact hook for loading data
react-use-fetch-factoryReact hook that takes care of fetching and selecting data with redux.
react-use-fetch-with-reduxReact hook that caches API requests that works with redux.
react-use-form-stateReact hook for managing form and inputs state.
react-use-id-hookReact hook for generating SSR-safe unique id strings.
react-use-idbReact hook for storing value in the browser using
react-use-infinite-loader♾️ 📃 ⏳ Super lightweight infinite loading (scroll) hook for React apps
react-use-input🎣 A hook whose setter can be directly given to HTML inputs
react-use-lazy-load-image🌅 ⚡ Add image lazy loading to your React app with ease
react-use-message-barA simple React hook for message bars.
react-use-modalReact hook for manage modal.
react-use-pathThe tiniest hook style react router.
react-use-scroll-positionReact hook for using the scroll position.
react-use-triggerReact hook for trigger effect from any place of code
react-use-watchA React hook about triggers once only when dependencies have changed.
react-use-waveletReact hooks for connecting to the Wavelet smart-contract platform
react-useCollection of essential hooks.
react-useFormlessReact hook to handle forms state.
react-usemiddlewareReact hook for using existing Redux middlewares (like thunk or saga) with
react-useportal🌀 usePortal, React hook for Portals
react-user-mediaReact wrapper for
react-waitComplex Loader Management Hook for React Applications.
react-window-communication-hookReact hook to communicate among browser contexts (tabs, windows, iframes).
react-with-hooksPonyfill for the proposed React Hooks API.
reaktionuseState like hook for global state management.
redhooksGlobal state management with React Hooks. It also supports the use of middleware like redux-thunk or redux-saga or your own custom middleware.
redux-react-hookReact hook for accessing mapped state from a Redux store.
region-coreA global state management framework with a hook
rehooks-visibility-sensorIt checks whether an element has scrolled into view or not.
resyncedMultiple state management using React Hooks API.
retoFlexible and efficient React store with hooks.
rrhSuper Simple React Hooks for react-redux.
rxjs-hooksAn easy way to use RxJS v6+ with react hooks.
scroll-data-hookReturns information about scroll speed, distance, direction and more.
style-hook🎨 wirte css in js with react hooks.
swrReact Hooks library for remote data fetching.
the-platformBrowser API's turned into React Hooks and Suspense-friendly React elements for common situations.
trousers👖 A hooks-first CSS-in-JS library, focused on semantics and runtime performance
use-abortable-fetchReact hook that does a fetch and aborts when the components is unloaded or a different request is made.
use-actionAlmost same to useEffect, but not deferred.
use-as-bindReact hook for using as-bind with a WASM source.
use-async-memoReact hook for generating async memoized data.
use-autocompleteA React hook for returning autocomplete values for a search string within an array.
use-axios-reactReact CRUD hooks for axios, comprehensive list of examples
use-booleanConvenient helpers for handling boolean state.
use-browser-historyA React hook to handle browser history events.
use-cartA React hook that gives you shopping cart functionality.
use-click-awayReact hook when you want a callback invoked when a DOM element was not clicked.
use-clippyA React hook to reading from and writing to the user's clipboard.
use-context-selectorReact useContextSelector hook in userland.
use-controlled-input-numberReact hook to turn numeric input behavior into pretty much what you expect.
use-countriesCustom react hook to list countries and languages.
use-debounceA debounce (and throttle) hook for React.
use-deep-compareIt's react's useEffect/useMemo/useCallback hooks, except using deep comparison on the inputs.
use-deep-compare-effect🐋 It's react's useEffect hook, except using deep comparison on the inputs, not reference equality.
use-detect-printReact hook to detect when a page is being printed.
use-dimensionsReact Native hook for getting screen and window dimensions.
use-double-clickReact hook for continuous double-clicks and combining click and double-click events
use-eazy-authReact hooks for handle auth stuff.
use-eventsA set of React Hooks to handle mouse events.
use-force-updateReact hook for forcing re-render of a functional Component.
use-hotkeysHotKeys.js React Hook that listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts.
use-hoveringSimple, accessible React hook for tracking hover state.
use-http🐶 useFetch, React hook for making isomorphic http requests.
use-immerA hook to use immer to manipulate state.
use-input-fileReact hook for creating input file.
useIsMountedRefis a React Hook to check when the component is mounted.
use-lang-directionA hook that reads the HTML element's
dirattribute value and any updates to that value allowing you to update your UI accordingly.
use-last-fmA hook to show your current playing song from Spotify or any other site last.fm supports in realtime. ♪
use-liliusA headless calendar hook for React.
use-mediaCSS media queries with React hook.
use-mouse-actionReact Hooks to listen to both mouse down or up and click events with a once called function.
use-multiselectManage multiselect state.
use-overflowA React Hook that allows you to detect X and Y overflow
use-places-autocomplete📍 React hook for Google Maps Places Autocomplete.
use-popperReact hook wrapper around Popper.js.
use-query-paramsA React Hook for managing state in URL query parameters with easy serialization.
use-react-modal🖼 useModal, React hook for Modals/Dialogs/Lightboxes
use-react-routerReact Hook for pub-sub behavior using React Router.
useReactiveState()- a reactive alternative to React's
use-reducer-asyncReact useReducer with async actions
use-reduxA hook to bind redux.
use-scrollerReact hook that automatically adds the next page, saving users from a full page load.
use-scroll-to-bottomReact hook for detecting when an element was scrolled to bottom.
use-simple-undoSimple implementation of undo/redo functionality.
server-push-hooks🔥 React hooks for socket.io, SEE and more to come
use-socket.io-clientReact hook for socket.io-client, manipulate socket.io client without any side effect.
use-sse✨useSSE - use Server-Side Effect.
useEffectboth on client and server side.
use-ssr☯️ React hook to determine if you are on the server, browser, or react native.
use-state-snapshotsA React hook to keep track of state changes for undo/redo functionality.
use-substateReact hook for subscribing to your single app state (works with your current Redux app).
use-suspenderExecute asynchronous actions with
use-tMulti-language using hooks.
use-undoReact hook to implement Undo and Redo functionality.
use-videocardReact hook to fetch the graphics card information of the client using canvas
use-window-blur-change-titleReact Hook for set the page title when the user is shifting focus away from the current window.
useDarkModeA custom React Hook to help you implement a "dark mode" component.
useDeferredStateA React hook for deferring state change. That's essential when your UI needs to wait for disappearing animation is complete to unmount component.
useDropZoneReact hook that allows you to set simple drag and drop functionality.
useEmailAutocomplete📬 React hook for email autocomplete inputs.
useFileDialogOpen file dialog without struggling with file input using useFileDialog react hook
useInViewReact implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.
useIsTypingHook to see if the user is typing within a textarea or input
useKeyCapture⌨️ A simple hook to make keyDown listening event easier.
usePositionReact hook to get position top left of an element.
useReducerWithEffectsReact Hook that colocates reducer and side effects
useReducerWithLocalStorageReact hook that adds local storage support to the
useScreenTypeDetermining screen size type for Bootstrap 4 grid.
useScreenTypeReact hook to dynamically get current screen type (mobile, tablet, desktop) with configurable breakpoint support.
useScrollSpyReact hook to automatically update navigation based on scroll position.
useServiceWorkerA React hook which can register a service worker
useValueAfterVery simple React hook to easily provide different props to a component (comes in handy for testing edge cases)
useWaitForElementsA simple hook to wait for elements to be rendered with MutationObserver.
useWindowOrientationA hook returning the window's orientation (portrait vs. landscape) based off of current window dimensions
useWindowWidthBreakpointsA hook for using (Bootstrap-inspired) window width breakpoints