└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # awesome-react-hooks [![Awesome](https://awesome.re/badge.svg)](https://awesome.re) 2 | 3 | > Awesome React Hooks Resources 4 | 5 | ## Documentation 6 | 7 | - [React Hooks Docs](https://reactjs.org/docs/hooks-intro.html) 8 | 9 | ## Discussions 10 | 11 | - [React Hooks RFC](https://github.com/reactjs/rfcs/pull/68) 12 | 13 | ## Tutorials 14 | 15 | - ["Making Sense of React Hooks" by Dan Abramov](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889) 16 | - ["From React.Component to hooks" by Octave Raimbault](https://medium.com/@dispix/from-react-component-to-hooks-b50241334365) 17 | - ["React Hooks: What’s going to happen to my tests?" by Kent C. Dodds](https://blog.kentcdodds.com/react-hooks-whats-going-to-happen-to-my-tests-df4c2b4d67b7) 18 | - ["State Management with React Hooks - No Redux or Context API" by André Gardi](https://medium.com/javascript-in-plain-english/state-management-with-react-hooks-no-redux-or-context-api-8b3035ceecf8) 19 | - ["How to Fetch Data with React Hooks?" by Robin Wieruch](https://www.robinwieruch.de/react-hooks-fetch-data/) 20 | - [Primer on React Hooks](https://testdriven.io/blog/react-hooks-primer/) 21 | - [React Hooks - A deeper dive featuring useContext and useReducer](https://testdriven.io/blog/react-hooks-advanced/) 22 | - ["Using Custom React Hooks to Simplify Forms" by James King](https://upmostly.com/tutorials/using-custom-react-hooks-simplify-forms) 23 | 24 | ## Videos 25 | 26 | - [🎬 ReactConf 2018: React Today and Tomorrow by Sophie Alpert and Dan Abramov](https://youtu.be/V-QO-KO90iQ) Official announcement and first demo. 27 | - [🎬 ReactConf 2018: 90% Cleaner React by Ryan Florence](https://youtu.be/wXLf18DsV-I) 28 | - [🎬 React Hooks: A Complete Introduction by Harry Wolff](https://youtu.be/jd8R0a2Ur8Q) 29 | - [🎬 React Hooks playlist by Ben Awad](https://www.youtube.com/playlist?list=PLN3n1USn4xllL1OrVr-A4oq7SG-cS9MOQ) 30 | - [🎬 React Hooks playlist by Josh Ribakoff](https://www.youtube.com/playlist?list=PLj2oFNVaxfJ-AcPo191jz09g-v9CLRfCg) 31 | - [🎬 React Hooks playlist by Michael Chan](https://www.youtube.com/playlist?list=PLnc_NxpmOxaNf_mTUx1BgoP5POXwSAu-g) 32 | 33 | ## Podcasts 34 | 35 | - [React Hooks - Syntax](https://syntax.fm/show/092/react-hooks) 36 | 37 | ## Tools 38 | 39 | - [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) 40 | - [`hooks.macro`](https://www.npmjs.com/package/hooks.macro) Babel Macros for automatic memoization invalidation 41 | - [CodeSandbox Starter Kit](https://codesandbox.io/s/7y6o4282lq) 42 | - [React Hooks Snippets for VS Code](https://marketplace.visualstudio.com/items?itemName=antmdvs.vscode-react-hooks-snippets) 43 | - [`hook-into-props`](https://github.com/juliettepretot/hook-into-props/tree/1e069a6c01c2a783100f2fea7709f56d8166a97e) Helper to build HOCs using hooks. Useful for using hooks with class components. 44 | - [`react-universal-hooks`](https://github.com/salvoravida/react-universal-hooks) React Universal Hooks: just use****** everywhere, Functional or Class Components 45 | - [Jooks](https://github.com/antoinejaussoin/jooks) Unit-test your custom hooks by mocking React's Hooks API (useState, etc.) 46 | 47 | ## Catalogs 48 | 49 | - [crooks](https://github.com/chrisjpatty/crooks) A collection of unique React Hooks. 50 | - [hooks-by-example](https://github.com/latviancoder/hooks-by-example) Collection of beginner-friendly real world examples of hook usage. 51 | - [Hooks.guide](https://www.hooks.guide/) Collection of React hooks curated by the community. 52 | - [Searchable Collection of React Hooks](https://nikgraf.github.io/react-hooks/) 53 | - [Sunflower(🌻)](https://github.com/ant-design/sunflower) Collection of React Hooks returning components of antd. 54 | - [useHooks(🐠)](https://usehooks.com/) One new React Hook recipe every day. 55 | - [Use Hooks](https://use-hooks.org/) A collection of reusable React Hooks. 56 | 57 | ## Packages 58 | 59 | - [`@21kb/react-hooks`](https://github.com/21kb/react-hooks) A set of React Hooks to get _hooked_ on. 60 | - [`@kevinwolf/formal`](https://github.com/kevinwolfcr/formal) Elegant form management primitives for the react hooks era. 61 | - [`@marvelsq/use-properties-hook`](https://github.com/MarvelSQ/use-properties-hook) Instance functions inside FunctionComponent like `class-properties` and equal in `ShallowCompare` 62 | - [`@rehooks/component-size`](https://github.com/rehooks/component-size) React hook for determining the size of a component. 63 | - [`@rehooks/document-title`](https://github.com/rehooks/document-title) React hook for updating the document-title. 64 | - [`@rehooks/document-visibility`](https://github.com/rehooks/document-visibility) React hook for subscribing to document visibility. 65 | - [`@rehooks/input-value`](https://github.com/rehooks/input-value) React hook for creating input values. 66 | - [`@rehooks/local-storage`](https://github.com/rehooks/local-storage) React hook which syncs `localStorage[key]` with the comp. 67 | - [`@rehooks/network-status`](https://github.com/rehooks/network-status) React hook for getting network-status. 68 | - [`@rehooks/online-status`](https://github.com/rehooks/online-status) React Hook for Online status. 69 | - [`@rehooks/window-scroll-position`](https://github.com/rehooks/window-scroll-position) React hook for getting window `x` and `y` position. 70 | - [`@rehooks/window-size`](https://github.com/rehooks/window-size) React hook for subscribing to window size. 71 | - [`@staltz/use-profunctor-state`](https://github.com/staltz/use-profunctor-state) React Hook for state management with Profunctor Optics 72 | - [`@withvoid/melting-pot`](https://github.com/withvoid/melting-pot) React hook utility library. 73 | - [`constate`](https://github.com/diegohaz/constate) Transform your local state into global state using `useContextState` and `useContextReducer`. 74 | - [`easy-peasy`](https://github.com/ctrlplusb/easy-peasy) Easy peasy global state for React. 75 | - [`fetch-suspense`](https://github.com/CharlesStover/fetch-suspense) React hook for the Fetch API with support for Suspense. 76 | - [`graphql-hooks`](https://github.com/nearform/graphql-hooks) Minimal hooks-first GraphQL client. 77 | - [`mobx-react-lite`](https://github.com/mobxjs/mobx-react-lite) Lightweight React bindings for MobX based on experimental React hooks. 78 | - [`modali`](https://github.com/upmostly/modali) A delightful modal dialog component for React, built from the ground up to support React Hooks. 79 | - [`promise-hook`](https://github.com/aiven715/promise-hook) React hook for simplifying Promise based data fetching. 80 | - [`react-async-hook`](https://github.com/slorber/react-async-hook) React hook to fetch ad-hoc data into your React components. 81 | - [`react-declare-form`](https://github.com/andy9775/react-declare-form) React hook based declarative form library. 82 | - [`react-dom-status-hook`](https://github.com/yeskunall/react-dom-status-hook) React hook for subscribing to the `DOMContentLoaded` event. 83 | - [`react-enhanced-reducer-hook`](https://github.com/shiningjason/react-enhanced-reducer-hook) An alternative to `useReducer` that accepts middlewares. 84 | - [`react-fetch-hook`](https://github.com/ilyalesik/react-fetch-hook) React hook for conveniently use Fetch API. 85 | - [`react-firebase-hooks`](https://github.com/csfrequency/react-firebase-hooks) A collection of hooks for use with [Firebase](https://firebase.google.com). 86 | - [`react-form-stateful`](https://github.com/ckedwards/react-form-stateful) Form library. Exposes dispatch to allow for the library to be extended through side effects. 87 | - [`react-hanger`](https://github.com/kitze/react-hanger) A small collection of utility hooks. 88 | - [`react-hook-mousetrap`](https://www.npmjs.com/package/react-hook-mousetrap) A hook to trigger callbacks on keys or keys combos, powered by mousetrap. 89 | - [`react-hookedup`](https://github.com/zakariaharti/react-hookedup) A collection of useful React hooks. 90 | - [`react-hooks-easy-redux`](https://github.com/dai-shi/react-hooks-easy-redux) React hooks for Redux with Proxy-based auto-detection of state usage. 91 | - [`react-hook-form`](https://github.com/bluebill1049/react-hook-form) Form validation without the hassle. 92 | - [`react-hooks-global-state`](https://github.com/dai-shi/react-hooks-global-state) A simple global state management. 93 | - [`react-hooks-image-size`](https://github.com/use-hooks/react-hooks-image-size) Hook to get natural image size from url. 94 | - [`react-hooks-lib`](https://github.com/beizhedenglong/react-hooks-lib) A set of reusable react hooks. 95 | - [`react-hotkey-hook`](https://github.com/JohannesKlauss/react-hotkeys-hook) React hook for hotkeys. 96 | - [`react-i18next`](https://react.i18next.com/latest/usetranslation-hook) Internationalization for react done right. 97 | - [`react-immer-hooks`](https://github.com/sin/react-immer-hooks) useState and useReducer using Immer to update state. 98 | - [`react-indicative-hooks`](https://github.com/marceloadsj/react-indicative-hooks) Hooks wrapping a data validation library called [Indicative](http://indicative.adonisjs.com) 99 | - [`react-intersection-visible-hook`](https://github.com/AvraamMavridis/react-intersection-visible-hook) React hook to track the visibility of a functional component. 100 | - [`react-media-hook`](https://github.com/lessmess-agency/react-media-hook) React hook for Media Queries. 101 | - [`react-metatags-hook`](https://github.com/lordgiotto/react-metatags-hook) React Hook to manage html meta tags. 102 | - [`react-peer-data`](https://github.com/vardius/react-peer-data) React wrapper for PeerData library for files, media streaming/sharing using WebRTC. 103 | - [`react-pirate`](https://github.com/dispix/react-pirate) React lifecycle and utilities hooks. 104 | - [`react-powerhooks`](https://github.com/kalcifer/react-powerhooks) Hooks api for react-powerplug components. 105 | - [`react-promiseful`](https://github.com/moxystudio/react-promiseful) A React component and hook to render children conditionally based on a promise status. 106 | - [`react-request-hook`](https://github.com/schettino/react-request-hook) Managed, cancelable and safe-oriented api requests. 107 | - [`react-selector-hooks`](https://github.com/Andarist/react-selector-hooks) Collection of hook-based memoized selector factories for declarations outside of render. 108 | - [`react-speech-kit`](https://github.com/MikeyParton/react-speech-kit) Hooks for browser Speech Recognition and Speech Synthesis. 109 | - [`react-state-patterns`](https://github.com/mcclayton/react-state-patterns) Utility package for creating reusable implementations of React state provider patterns from hooks. 110 | - [`react-swipeable`](https://github.com/dogfessional/react-swipeable) React swipe event handler hook. 111 | - [`react-use-calendar`](https://github.com/gregnb/react-use-calendar) A hook for implementing a calendar with events. 112 | - [`react-use-clipboard`](https://github.com/danoc/react-use-clipboard) A hook that copies text to a user's clipboard. 113 | - [`react-use-data-loader`](https://github.com/smmoosavi/react-use-data-loader) React hook for loading data 114 | - [`react-use-form-state`](https://github.com/wsmd/react-use-form-state) React hook for managing form and inputs state. 115 | - [`react-use-idb`](https://github.com/kigiri/react-use-idb) React hook for storing value in the browser using `indexDB`. 116 | - [`react-use-input`](https://github.com/robcalcroft/react-use-input) 🎣 A hook whose setter can be directly given to HTML inputs 117 | - [`react-use-modal`](https://github.com/wowlusitong/react-use-modal) React hook for manage modal. 118 | - [`react-use-path`](https://github.com/zhangkaiyulw/react-use-path) The tiniest hook style react router. 119 | - [`react-use-scroll-position`](https://github.com/neo/react-use-scroll-position) React hook for using the scroll position. 120 | - [`react-use-state-x`](https://github.com/avkonst/react-use-state-x) Tiny, type-safe, feature-rich useState-like hook to manage complex state (objects, arrays, nested data, forms) and global stores (alternative to Redux/Mobx) 121 | - [`react-use-trigger`](https://github.com/ilyalesik/react-use-trigger) React hook for trigger effect from any place of code 122 | - [`react-use`](https://github.com/streamich/react-use) Collection of essential hooks. 123 | - [`react-useFormless`](https://github.com/GeDiez/react-use-formless) React hook to handle forms state. 124 | - [`react-usemiddleware`](https://github.com/venil7/react-usemiddleware) React hook for using existing Redux middlewares (like thunk or saga) with `useReducer`. 125 | - [`react-user-media`](https://github.com/vardius/react-user-media) React wrapper for `navigator.getUserMedia`. 126 | - [`react-wait`](https://github.com/f/react-wait) Complex Loader Management Hook for React Applications. 127 | - [`react-window-communication-hook`](https://github.com/AvraamMavridis/react-window-communication-hook) React hook to communicate among browser contexts (tabs, windows, iframes). 128 | - [`react-with-hooks`](https://github.com/yesmeck/react-with-hooks) Ponyfill for the proposed React Hooks API. 129 | - [`reaktion`](https://github.com/mfrachet/reaktion) useState like hook for global state management. 130 | - [`redhooks`](https://github.com/iusehooks/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. 131 | - [`redux-react-hook`](https://github.com/ianobermiller/redux-react-hook) React hook for accessing mapped state from a Redux store. 132 | - [`region-core`](https://github.com/regionjs/region-core) A global state management framework with a hook `useProps`. 133 | - [`rehooks-visibility-sensor`](https://github.com/imbhargav5/rehooks-visibility-sensor) It checks whether an element has scrolled into view or not. 134 | - [`resynced`](https://github.com/pedronasser/resynced) Multiple state management using React Hooks API. 135 | - [`rrh`](https://github.com/brn/rrh) Super Simple React Hooks for react-redux. 136 | - [`rxjs-hooks`](https://github.com/LeetCode-OpenSource/rxjs-hooks) An easy way to use RxJS v6+ with react hooks. 137 | - [`the-platform`](https://github.com/palmerhq/the-platform) Browser API's turned into React Hooks and Suspense-friendly React elements for common situations. 138 | - [`trousers`](https://github.com/danieldelcore/trousers) Give your React components some style with Trousers. 139 | - [`use-abortable-fetch`](https://github.com/mauricedb/use-abortable-fetch) React hook that does a fetch and aborts when the components is unloaded or a different request is made. 140 | - [`use-action`](https://github.com/awmleer/use-action) Almost same to useEffect, but not deferred. 141 | - [`use-browser-history`](https://github.com/zcallan/use-browser-history) A React hook to handle browser history events. 142 | - [`use-cart`](https://github.com/samjbmason/use-cart) A React hook that gives you shopping cart functionality. 143 | - [`use-clippy`](https://github.com/CharlesStover/use-clippy) A React hook to reading from and writing to the user's clipboard. 144 | - [`use-debounce`](https://github.com/xnimorz/use-debounce) A debounce hook for React. 145 | - [`use-deep-compare-effect`](https://github.com/kentcdodds/use-deep-compare-effect) 🐋 It's react's useEffect hook, except using deep comparison on the inputs, not reference equality. 146 | - [`use-detect-print`](https://github.com/gregnb/use-detect-print) React hook to detect when a page is being printed. 147 | - [`use-dimensions`](https://github.com/CharlesStover/use-dimensions) React Native hook for getting screen and window dimensions. 148 | - [`use-eazy-auth`](https://github.com/gffuma/use-eazy-auth) React hooks for handle auth stuff. 149 | - [`use-events`](https://github.com/sandiiarov/use-events) A set of React Hooks to handle mouse events. 150 | - [`use-force-update`](https://github.com/CharlesStover/use-force-update) React hook for forcing re-render of a functional Component. 151 | - [`use-hotkeys`](https://github.com/sandiiarov/use-hotkeys) HotKeys.js React Hook that listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts. 152 | - [`use-http`](https://github.com/alex-cory/use-http) 🐶 useFetch, a React hook for making isomorphic http requests. 153 | - [`use-immer`](https://github.com/mweststrate/use-immer) A hook to use [immer](https://github.com/mweststrate/immer) to manipulate state. 154 | - [`use-media`](https://github.com/streamich/use-media) CSS media queries with React hook. 155 | - [`use-mouse-action`](https://github.com/dimitrinicolas/use-mouse-action) React Hooks to listen to both mouse down or up and click events with a once called function. 156 | - [`use-multiselect`](https://github.com/jschloer/use-multiselect) Manage multiselect state. 157 | - [`use-popper`](https://github.com/sandiiarov/use-popper) React hook wrapper around Popper.js. 158 | - [`use-react-router`](https://github.com/CharlesStover/use-react-router) React Hook for pub-sub behavior using React Router. 159 | - [`use-redux`](https://github.com/flepretre/use-redux) A hook to bind [redux](https://redux.js.org). 160 | - [`use-simple-undo`](https://github.com/sandiiarov/use-simple-undo) Simple implementation of undo/redo functionality. 161 | - [`use-socketio`](https://github.com/mfrachet/use-socketio) React hooks to use with https://socket.io/. 162 | - [`use-socket.io-client`](https://github.com/iamgyz/use-socket.io-client) React hook for socket.io-client, manipulate [socket.io](https://socket.io) client without any side effect. 163 | - [`use-ssr`](https://github.com/alex-cory/use-ssr) React hook to determine if you are on the server or browser. 164 | - [`use-state-snapshots`](https://github.com/haydn/use-state-snapshots) A React hook to keep track of state changes for undo/redo functionality. 165 | - [`use-store`](https://github.com/pretodor/use-store) `useStore()` - a reactive alternative to React's `useState()` 166 | - [`use-substate`](https://github.com/philipp-spiess/use-substate) React hook for subscribing to your single app state (works with your current [Redux](https://redux.js.org/) app). 167 | - [`use-t`](https://github.com/streamich/use-t) Multi-language using hooks. 168 | - [`use-undo`](https://github.com/xxhomey19/use-undo) React hook to implement Undo and Redo functionality. 169 | - [`useDarkMode`](https://github.com/donavon/use-dark-mode) A custom React Hook to help you implement a "dark mode" component. 170 | - [`useEmailAutocomplete`](https://github.com/alex-cory/use-email-autocomplete) 📬 React hook for email autocomplete inputs. 171 | - [`usePortal`](https://github.com/alex-cory/react-useportal) 🌀 A React hook for using Portals. 172 | - [`usePosition`](https://github.com/tranbathanhtung/usePosition) React hook to get position top left of an element. 173 | - [`useScreenType`](https://github.com/pankod/react-hooks-screen-type) Determining screen size type for Bootstrap 4 grid. 174 | - [`useScrollSpy`](https://github.com/Purii/react-use-scrollspy) React hook to automatically update navigation based on scroll position. 175 | --------------------------------------------------------------------------------