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
- π¬ 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
eslint-plugin-react-hookshooks.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.
- @umijs/hooks(π) A collection of React Hooks specifically aiming at enterprise applications.
- 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.
- beautiful-react-hooks(π₯) A collection of hooks to speed-up your components and custom hooks development.
@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.@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.@marvelsq/use-properties-hookInstance functions inside FunctionComponent likeclass-propertiesand equal inShallowCompare@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 syncslocalStorage[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 windowxandyposition.@rehooks/window-sizeReact hook for subscribing to window size.@rekindle/use-requestπ€ React hook for making request.@staltz/use-profunctor-stateReact Hook for state management with Profunctor Optics@withvoid/melting-potReact hook utility library.constateTransform your local state into global state usinguseContextStateanduseContextReducer.conuseShare Hook with Contexteasy-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 hooksnice-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 Proxyreact-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-cool-onclickoutsideπ± React hook to listen for clicks outside of the component(s).react-declare-formReact hook based declarative form library.react-dom-status-hookReact hook for subscribing to theDOMContentLoadedevent.react-enhanced-reducer-hookAn alternative touseReducerthat 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-hooks-asyncReact custom hooks for async functions with abortability and composabilityreact-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 workersreact-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 Indicativereact-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-optimistic-ui-hookβοΈ Minimal "optimistic UI" pattern implementation with a React hookreact-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-recaptcha-hookReact hook for google-recaptcha v3react-recipesπ©βπ³ Collection of essential hook recipes π₯react-request-hookManaged, cancelable and safe-oriented api requests.react-rocketjumpManage state and side effects like a breeze.react-script-hookReact hook to dynamically load an external script and know when its loadedreact-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-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-data-loaderReact hook for loading datareact-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 usingindexDB.react-use-inputπ£ A hook whose setter can be directly given to HTML inputsreact-use-lazy-load-imageπ β‘ Add image lazy loading to your React app with easereact-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 codereact-use-waveletReact hooks for connecting to the Wavelet smart-contract platformreact-useCollection of essential hooks.react-useFormlessReact hook to handle forms state.react-usemiddlewareReact hook for using existing Redux middlewares (like thunk or saga) withuseReducer.react-useportalπ usePortal, React hook for Portalsreact-user-mediaReact wrapper fornavigator.getUserMedia.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 hookuseProps.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 performanceuse-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-async-memoReact hook for generating async memoized data.use-axios-reactReact CRUD hooks for axios, comprehensive list of examplesuse-browser-historyA React hook to handle browser history events.use-cartA React hook that gives you shopping cart functionality.use-clippyA React hook to reading from and writing to the user's clipboard.use-context-selectorReact useContextSelector hook in userlanduse-debounceA debounce 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-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-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-places-autocompleteπ React hook for Google Maps Places Autocomplete.use-popperReact hook wrapper around Popper.js.use-react-modalπΌ useModal, React hook for Modals/Dialogs/Lightboxesuse-react-routerReact Hook for pub-sub behavior using React Router.use-reactive-stateuseReactiveState()- a reactive alternative to React'suseState().use-reducer-asyncReact useReducer with async actionsuse-reduxA hook to bind redux.use-simple-undoSimple implementation of undo/redo functionality.use-socketioReact hooks to use with https://socket.io/.use-socket.io-clientReact hook for socket.io-client, manipulate socket.io client without any side effect.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-tMulti-language using hooks.use-undoReact hook to implement Undo and Redo functionality.useDarkModeA custom React Hook to help you implement a "dark mode" component.useEmailAutocompleteπ¬ React hook for email autocomplete inputs.usePositionReact hook to get position top left of an element.useScreenTypeDetermining screen size type for Bootstrap 4 grid.useScrollSpyReact hook to automatically update navigation based on scroll position.useValueAfterVery simple React hook to easily provide different props to a component (comes in handy for testing edge cases)