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
🎬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
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.)
- 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.
- Searchable Collection of React Hooks
🐠) 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.
@kevinwolf/formalElegant form management primitives for the react hooks era.
@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.
@staltz/use-profunctor-stateReact Hook for state management with Profunctor Optics
@withvoid/melting-potReact hook utility library.
constateTransform your local state into global state using
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.
promise-hookReact hook for simplifying Promise based data fetching.
react-async-hookReact hook to fetch ad-hoc data into your React components.
react-declare-formReact hook based declarative form library.
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-mousetrapA hook to trigger callbacks on keys or keys combos, powered by mousetrap.
react-hookedupA collection of useful React hooks.
react-hooks-easy-reduxReact hooks for Redux with Proxy-based auto-detection of state usage.
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-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-pirateReact lifecycle and utilities hooks.
react-powerhooksHooks api for react-powerplug components.
react-request-hookManaged, cancelable and safe-oriented api requests.
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-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 data
react-use-form-stateReact hook for managing form and inputs state.
react-use-idbReact hook for storing value in the browser using
🎣A hook whose setter can be directly given to HTML inputs
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-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-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.
rrhSuper Simple React Hooks for react-redux.
rxjs-hooksAn easy way to use RxJS v6+ with react hooks.
the-platformBrowser API's turned into React Hooks and Suspense-friendly React elements for common situations.
trousersGive your React components some style with Trousers.
use-abortable-fetchReact hook that does a fetch and aborts when the components is unloaded or a different request is made.
use-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-debounceA debounce hook for React.
🐋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.
🐶useFetch, a 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-popperReact hook wrapper around Popper.js.
use-react-routerReact Hook for pub-sub behavior using React Router.
use-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-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.
📬React hook for email autocomplete inputs.
🌀A React hook for using Portals.
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.