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
- π¬ Custom Hooks in React by Tanner Linsley
eslint-plugin-react-hooks
hooks.macro
Babel Macros for automatic memoization invalidation- CodeSandbox Starter Kit
- React Hooks Snippets for VS Code
hook-into-props
Helper to build HOCs using hooks. Useful for using hooks with class components.react-universal-hooks
React 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-library
Library to create unit tests for custom React hooks.
- ahooks 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-hooks
A set of React Hooks to get hooked on.@d2k/react-devto
React hook for Dev.to API requests@d2k/react-github
React hook for Github API requests@d2k/react-localstorage
React hook that handles updating and clearing localstorage values while keeping them in sync with your components.@elgorditosalsero/react-gtm-hook
React hook for handle easily the Google Tag Manager.@hookstate/core
Modern, very fast and extendable state management for React.@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.@koale/useworker
βοΈ Running heavy task in background using web workers, without blocking the UI@marvelsq/use-properties-hook
Instance functions inside FunctionComponent likeclass-properties
and equal inShallowCompare
@rehooks/component-size
React hook for determining the size of a component.@rehooks/document-title
React hook for updating the document-title.@rehooks/document-visibility
React hook for subscribing to document visibility.@rehooks/input-value
React hook for creating input values.@rehooks/local-storage
React hook which syncslocalStorage[key]
with the comp.@rehooks/network-status
React hook for getting network-status.@rehooks/online-status
React Hook for Online status.@rehooks/window-scroll-position
React hook for getting windowx
andy
position.@rehooks/window-size
React hook for subscribing to window size.@rekindle/use-request
π€ React hook for making request.@staltz/use-profunctor-state
React 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-pot
React hook utility library.ahooks/usetable
A Progressive Solution for Query Table Scene.constate
Transform your local state into global state usinguseContextState
anduseContextReducer
.conuse
Share Hook with Contexteasy-peasy
Easy peasy global state for React.fetch-suspense
React hook for the Fetch API with support for Suspense.graphql-hooks
Minimal hooks-first GraphQL client.mobx-react-lite
Lightweight React bindings for MobX based on experimental React hooks.modali
A delightful modal dialog component for React, built from the ground up to support React Hooks.moment-hooks
A 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-hook
React hook for simplifying Promise based data fetching.reactive-react-redux
React Redux binding with React Hooks and Proxyreact-async-hook
React hook to fetch ad-hoc data into your React components.react-cached-callback
React hooks for caching many callbacks by key, for example, in loops.react-context-refs
React hooks for getting refs of elements via context.react-cool-dimensions
π React hook to measure an element's size and handle responsive components.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-countdown-hook
Dead simple yet powerful countdown hook for React. Powered byrequestAnimationFrame
.react-declare-form
React hook based declarative form library.react-dom-status-hook
React hook for subscribing to theDOMContentLoaded
event.react-enhanced-reducer-hook
An alternative touseReducer
that accepts middlewares.react-fetch-hook
React hook for conveniently use Fetch API.react-firebase-hooks
A collection of hooks for use with Firebase.react-form-stateful
Form library. Exposes dispatch to allow for the library to be extended through side effects.react-hanger
A small collection of utility hooks.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.react-hookedup
A collection of useful React hooks.react-hook-form
Form validation without the hassle.react-hook-layout
Layout management in React.react-hooks-async
React custom hooks for async functions with abortability and composabilityreact-hooks-global-state
A simple global state management.react-hooks-image-size
Hook to get natural image size from url.react-hooks-lib
A set of reusable react hooks.react-hooks-svgdrawing
A hooks to svg drawing.react-hooks-use-modal
A hook to open the modal easily.react-hooks-visible
A hook to element visibility. Uses the intersection observer API.react-hooks-worker
React custom hooks for web workersreact-hotkey-hook
React hook for hotkeys.react-i18next
Internationalization for react done right.react-immer-hooks
useState and useReducer using Immer to update state.react-indicative-hooks
Hooks wrapping a data validation library called Indicativereact-intersection-visible-hook
React hook to track the visibility of a functional component.react-media-hook
React hook for Media Queries.react-metatags-hook
React Hook to manage html meta tags.react-optimistic-ui-hook
βοΈ Minimal "optimistic UI" pattern implementation with a React hookreact-page-name
React Hook for managing the page title.react-peer-data
React wrapper for PeerData library for files, media streaming/sharing using WebRTC.react-pirate
React lifecycle and utilities hooks.react-powerhooks
Hooks api for react-powerplug components.react-promiseful
A React component and hook to render children conditionally based on a promise status.react-recaptcha-hook
React hook for google-recaptcha v3react-recipes
π©βπ³ Collection of essential hook recipes π₯react-request-hook
Managed, cancelable and safe-oriented api requests.react-rocketjump
Manage state and side effects like a breeze.react-script-hook
React hook to dynamically load an external script and know when its loadedreact-selector-hooks
Collection of hook-based memoized selector factories for declarations outside of render.react-speech-kit
Hooks for browser Speech Recognition and Speech Synthesis.react-state-patterns
Utility package for creating reusable implementations of React state provider patterns from hooks.react-swipeable
React swipe event handler hook.react-tracked
Simple and fast global state with React Context. Eliminate unnecessary re-renders without hassle.react-uniformed
π Declarative React forms using hooks.react-use-api
Async HTTP request data for axios. Designed for diverse UI states, SSR and data pre-caching.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.react-use-calendar
A hook for implementing a calendar with events.react-use-clipboard
A hook that copies text to a user's clipboard.react-use-data-loader
React hook for loading datareact-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.react-use-form-state
React hook for managing form and inputs state.react-use-id-hook
React hook for generating SSR-safe unique id strings.react-use-idb
React hook for storing value in the browser usingindexDB
.react-use-infinite-loader
βΎοΈ π β³ Super lightweight infinite loading (scroll) hook for React appsreact-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-message-bar
A simple React hook for message bars.react-use-modal
React hook for manage modal.react-use-path
The tiniest hook style react router.react-use-scroll-position
React hook for using the scroll position.react-use-trigger
React hook for trigger effect from any place of codereact-use-wavelet
React hooks for connecting to the Wavelet smart-contract platformreact-use
Collection of essential hooks.react-useFormless
React hook to handle forms state.react-usemiddleware
React hook for using existing Redux middlewares (like thunk or saga) withuseReducer
.react-useportal
π usePortal, React hook for Portalsreact-user-media
React wrapper fornavigator.getUserMedia
.react-wait
Complex Loader Management Hook for React Applications.react-window-communication-hook
React hook to communicate among browser contexts (tabs, windows, iframes).react-with-hooks
Ponyfill for the proposed React Hooks API.reaktion
useState like hook for global state management.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.redux-react-hook
React hook for accessing mapped state from a Redux store.region-core
A global state management framework with a hookuseProps
.rehooks-visibility-sensor
It checks whether an element has scrolled into view or not.resynced
Multiple state management using React Hooks API.reto
Flexible and efficient React store with hooks.rrh
Super Simple React Hooks for react-redux.rxjs-hooks
An easy way to use RxJS v6+ with react hooks.scroll-data-hook
Returns information about scroll speed, distance, direction and more.style-hook
π¨ wirte css in js with react hooks.swr
React Hooks library for remote data fetching.the-platform
Browser 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-fetch
React hook that does a fetch and aborts when the components is unloaded or a different request is made.use-action
Almost same to useEffect, but not deferred.use-as-bind
React hook for using as-bind with a WASM source.use-async-memo
React hook for generating async memoized data.use-autocomplete
A React hook for returning autocomplete values for a search string within an array.use-axios-react
React CRUD hooks for axios, comprehensive list of examplesuse-boolean
Convenient helpers for handling boolean state.use-browser-history
A React hook to handle browser history events.use-cart
A React hook that gives you shopping cart functionality.use-click-away
React hook when you want a callback invoked when a DOM element was not clicked.use-clippy
A React hook to reading from and writing to the user's clipboard.use-context-selector
React useContextSelector hook in userland.use-controlled-input-number
React hook to turn numeric input behavior into pretty much what you expect.use-countries
Custom react hook to list countries and languages.use-debounce
A debounce hook for React.use-deep-compare
It'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-print
React hook to detect when a page is being printed.use-dimensions
React Native hook for getting screen and window dimensions.use-double-click
React hook for continuous double-clicks and combining click and double-click eventsuse-eazy-auth
React hooks for handle auth stuff.use-events
A set of React Hooks to handle mouse events.use-force-update
React hook for forcing re-render of a functional Component.use-hotkeys
HotKeys.js React Hook that listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts.use-hovering
Simple, accessible React hook for tracking hover state.use-http
πΆ useFetch, React hook for making isomorphic http requests.use-immer
A hook to use immer to manipulate state.use-input-file
React hook for creating input file.use-is-mounted-ref
useIsMountedRef
is a React Hook to check when the component is mounted.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.use-last-fm
A hook to show your current playing song from Spotify or any other site last.fm supports in realtime. βͺuse-media
CSS media queries with React hook.use-mouse-action
React Hooks to listen to both mouse down or up and click events with a once called function.use-multiselect
Manage multiselect state.use-overflow
A React Hook that allows you to detect X and Y overflowuse-places-autocomplete
π React hook for Google Maps Places Autocomplete.use-popper
React hook wrapper around Popper.js.use-react-modal
πΌ useModal, React hook for Modals/Dialogs/Lightboxesuse-react-router
React Hook for pub-sub behavior using React Router.use-reactive-state
useReactiveState()
- a reactive alternative to React'suseState()
.use-reducer-async
React useReducer with async actionsuse-redux
A hook to bind redux.use-scroller
React hook that automatically adds the next page, saving users from a full page load.use-scroll-to-bottom
React hook for detecting when an element was scrolled to bottom.use-simple-undo
Simple implementation of undo/redo functionality.use-socketio
React hooks to use with https://socket.io/.use-socket.io-client
React hook for socket.io-client, manipulate socket.io client without any side effect.use-sse
β¨useSSE - use Server-Side Effect.useEffect
both on client and server side.use-ssr
β―οΈ React hook to determine if you are on the server, browser, or react native.use-state-snapshots
A React hook to keep track of state changes for undo/redo functionality.use-substate
React hook for subscribing to your single app state (works with your current Redux app).use-suspender
Execute asynchronous actions withReact.Suspense
use-t
Multi-language using hooks.use-undo
React hook to implement Undo and Redo functionality.use-videocard
React hook to fetch the graphics card information of the client using canvasuseDarkMode
A custom React Hook to help you implement a "dark mode" component.useDropZone
React hook that allows you to set simple drag and drop functionality.useEmailAutocomplete
π¬ React hook for email autocomplete inputs.useIsTyping
Hook to see if the user is typing within a textarea or inputuseKeyCapture
β¨οΈ A simple hook to make keyDown listening event easier.usePosition
React hook to get position top left of an element.useReducerWithEffects
React Hook that colocates reducer and side effectsuseReducerWithLocalStorage
React hook that adds local storage support to theuseReducer
hookuseScreenType
Determining screen size type for Bootstrap 4 grid.useScreenType
React hook to dynamically get current screen type (mobile, tablet, desktop) with configurable breakpoint support.useScrollSpy
React hook to automatically update navigation based on scroll position.useServiceWorker
A React hook which can register a service workeruseValueAfter
Very simple React hook to easily provide different props to a component (comes in handy for testing edge cases)useWindowOrientation
A hook returning the window's orientation (portrait vs. landscape) based off of current window dimensionsuseWindowWidthBreakpoints
A hook for using (Bootstrap-inspired) window width breakpoints