Correia-jpv / fucking-awesome-react-hooks

Awesome React Hooks. With repository stars⭐ and forks🍴

hooks react react-documentation react-hook-form react-hooks react-hooks-demo react-hooks-project react-hooks-tutorial reactjs reactjs-hooks

awesome-react-hooks

Awesome React Hooks Resources

Documentation

🌎 React Hooks Docs

Discussions

?⭐ ?🍴 React Hooks RFC)

Tutorials

Videos

🌎 🎬 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

Podcasts

Tools

🌎 eslint-plugin-react-hooks
🌎 hooks.macro Babel Macros for automatic memoization invalidation
🌎 CodeSandbox Starter Kit
🌎 React Hooks Snippets for VS Code
47⭐ 0🍴 hook-into-props) Helper to build HOCs using hooks. Useful for using hooks with class components.
189⭐ 3🍴 react-universal-hooks) React Universal Hooks: just use****** everywhere, Functional or Class Components
84⭐ 8🍴 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.

Catalogs

1933⭐ 94🍴 @react-hookz/web) - A library of general-purpose React hooks built with care and SSR compatibility in mind.
14108⭐ 2722🍴 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.
363⭐ 38🍴 Captain hook) Modest list of hooks.
215⭐ 8🍴 crooks) A collection of unique React Hooks.
137⭐ 14🍴 hooks-by-example) Collection of beginner-friendly real world examples of hook usage.
🌎 Hooks.guide Collection of React hooks curated by the community.
1033⭐ 68🍴 react-recipes) 👩‍🍳 Collection of essential hook recipes 🥘
🌎 Searchable Collection of React Hooks
499⭐ 43🍴 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.

Packages

56⭐ 7🍴 @21kb/react-hooks) A set of React Hooks to get hooked on.
19⭐ 1🍴 @d2k/react-devto) React hook for Dev.to API requests
10⭐ 2🍴 @d2k/react-github) React hook for Github API requests
12⭐ 2🍴 @d2k/react-localstorage) React hook that handles updating and clearing localstorage values while keeping them in sync with your components.
220⭐ 28🍴 @elgorditosalsero/react-gtm-hook) React hook for handle easily the Google Tag Manager.
1659⭐ 109🍴 @hookstate/core) Modern, very fast and extendable state management for React.
11⭐ 1🍴 @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.
2976⭐ 101🍴 @koale/useworker) ⚙️ Running heavy task in background using web workers, without blocking the UI
6⭐ 0🍴 @marvelsq/use-properties-hook) Instance functions inside FunctionComponent like class-properties and equal in ShallowCompare
239⭐ 23🍴 @rehooks/component-size) React hook for determining the size of a component.
60⭐ 8🍴 @rehooks/document-title) React hook for updating the document-title.
31⭐ 3🍴 @rehooks/document-visibility) React hook for subscribing to document visibility.
113⭐ 7🍴 @rehooks/input-value) React hook for creating input values.
576⭐ 48🍴 @rehooks/local-storage) React hook which syncs localStorage[key] with the comp.
66⭐ 3🍴 @rehooks/network-status) React hook for getting network-status.
123⭐ 11🍴 @rehooks/online-status) React Hook for Online status.
82⭐ 13🍴 @rehooks/window-scroll-position) React hook for getting window x and y position.
131⭐ 20🍴 @rehooks/window-size) React hook for subscribing to window size.
21⭐ 3🍴 @rekindle/use-request) 🤖 React hook for making request.
17⭐ 1🍴 @rkrupinski/use-state-machine) A finite state machine hook.
334⭐ 11🍴 @staltz/use-profunctor-state) React Hook for state management with Profunctor Optics
34⭐ 9🍴 @webscopeio/react-health-check) 🏥 Lightweight React hook for checking health of API services.
1278⭐ 28🍴 @wellyshen/use-web-animations) 🍿 React hook for highly-performant and manipulable animations using Web Animations API.
59⭐ 14🍴 @withvoid/melting-pot) React hook utility library.
46⭐ 6🍴 ahooks/usetable) A Progressive Solution for Query Table Scene.
1346⭐ 70🍴 concent) State management that tailored for react, it is simple, predictable, progressive and efficient.
3931⭐ 91🍴 constate) Transform your local state into global state using useContextState and useContextReducer.
9⭐ 0🍴 conuse) Share Hook with Context
5033⭐ 190🍴 easy-peasy) Easy peasy global state for React.
492⭐ 25🍴 fetch-suspense) React hook for the Fetch API with support for Suspense.
1882⭐ 90🍴 graphql-hooks) Minimal hooks-first GraphQL client.
2130⭐ 90🍴 mobx-react-lite) Lightweight React bindings for MobX based on experimental React hooks.
214⭐ 21🍴 modali) A delightful modal dialog component for React, built from the ground up to support React Hooks.
8⭐ 1🍴 moment-hooks) A library containing generic react hooks
47⭐ 7🍴 nice-hooks) 🍹 A lot of nice hooks to make react hooks easier to use ( useState callback / life cycle / instance variable)
53⭐ 2🍴 promise-hook) React hook for simplifying Promise based data fetching.
504⭐ 11🍴 reactive-react-redux) React Redux binding with React Hooks and Proxy
1186⭐ 45🍴 react-async-hook) React hook to fetch ad-hoc data into your React components.
10⭐ 0🍴 react-cached-callback) React hooks for caching many callbacks by key, for example, in loops.
21⭐ 3🍴 react-context-refs) React hooks for getting refs of elements via context.
159⭐ 18🍴 react-cookie) React hooks for universal cookies.
941⭐ 20🍴 react-cool-dimensions) 📏 React hook to measure an element's size and handle responsive components.
248⭐ 10🍴 react-cool-form) 📋 React hooks for forms state and validation, less code more performant.
547⭐ 13🍴 react-cool-inview) 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).
547⭐ 13🍴 react-cool-onclickoutside) 🖱 React hook to listen for clicks outside of the component(s).
737⭐ 23🍴 react-cool-portal) 🍒 React hook for Portals, which renders modals, dropdowns, tooltips etc. to or else.
1214⭐ 39🍴 react-cool-virtual) ♻️ A tiny React hook for rendering large datasets like a breeze.
78⭐ 20🍴 react-countdown-hook) Dead simple yet powerful countdown hook for React. Powered by requestAnimationFrame.
277⭐ 21🍴 react-darkreader) 🌓 A React Hook for adding a dark / night mode to your site inspired by darkreader.
0⭐ 0🍴 react-declare-form) React hook based declarative form library.
4⭐ 1🍴 react-deep-hooks) React hooks for non-primitive dependencies.
?⭐ ?🍴 react-dom-status-hook) React hook for subscribing to the DOMContentLoaded event.
70⭐ 7🍴 react-enhanced-reducer-hook) An alternative to useReducer that accepts middlewares.
349⭐ 20🍴 react-fetch-hook) React hook for conveniently use Fetch API.
3603⭐ 306🍴 react-firebase-hooks) A collection of hooks for use with 🌎 Firebase.
2⭐ 0🍴 react-form-stateful) Form library. Exposes dispatch to allow for the library to be extended through side effects.
1935⭐ 74🍴 react-hanger) A small collection of utility hooks.
121⭐ 9🍴 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.
88⭐ 6🍴 react-hookedup) A collection of useful React hooks.
41738⭐ 2089🍴 react-hook-form) Form validation without the hassle.
18⭐ 1🍴 react-hook-layout) Layout management in React.
495⭐ 27🍴 react-hooks-async) React custom hooks for async functions with abortability and composability
1100⭐ 62🍴 react-hooks-global-state) A simple global state management.
19⭐ 2🍴 react-hooks-image-size) Hook to get natural image size from url.
545⭐ 27🍴 react-hooks-lib) A set of reusable react hooks.
200⭐ 11🍴 react-hooks-svgdrawing) A hooks to svg drawing.
171⭐ 21🍴 react-hooks-use-modal) A hook to open the modal easily.
29⭐ 0🍴 react-hooks-visible) A hook to element visibility. Uses the intersection observer API.
712⭐ 17🍴 react-hooks-worker) React custom hooks for web workers
2743⭐ 117🍴 react-hotkey-hook) React hook for hotkeys.
🌎 react-i18next Internationalization for react done right.
45⭐ 2🍴 react-immer-hooks) useState and useReducer using Immer to update state.
6⭐ 1🍴 react-indicative-hooks) Hooks wrapping a data validation library called Indicative
49⭐ 4🍴 react-intersection-visible-hook) React hook to track the visibility of a functional component.
61⭐ 8🍴 react-media-hook) React hook for Media Queries.
40⭐ 9🍴 react-metatags-hook) React Hook to manage html meta tags.
270⭐ 21🍴 react-native-react-bridge) A React Native plugin to run React and handle communication between them.
23⭐ 0🍴 react-optimistic-ui-hook) ⚛️ Minimal "optimistic UI" pattern implementation with a React hook
4⭐ 2🍴 react-page-name) React Hook for managing the page title.
20⭐ 1🍴 react-peer-data) React wrapper for PeerData library for files, media streaming/sharing using WebRTC.
52⭐ 6🍴 react-pirate) React lifecycle and utilities hooks.
100⭐ 8🍴 react-powerhooks) Hooks api for react-powerplug components.
9⭐ 1🍴 react-promiseful) A React component and hook to render children conditionally based on a promise status.
42750⭐ 2924🍴 react-query) Hooks for fetching, caching and updating asynchronous data in React.
26⭐ 7🍴 react-recaptcha-hook) React hook for google-recaptcha v3
1033⭐ 68🍴 react-recipes) 👩‍🍳 Collection of essential hook recipes 🥘
113⭐ 6🍴 react-request-hook) Managed, cancelable and safe-oriented api requests.
7042⭐ 298🍴 react-responsive) React media query module.
6⭐ 4🍴 react-rocketjump) Manage state and side effects like a breeze.
71⭐ 2🍴 react-screen-wake-lock) React 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
127⭐ 21🍴 react-script-hook) React hook to dynamically load an external script and know when its loaded
85⭐ 0🍴 react-selector-hooks) Collection of hook-based memoized selector factories for declarations outside of render.
238⭐ 64🍴 react-speech-kit) Hooks for browser Speech Recognition and Speech Synthesis.
16⭐ 2🍴 react-state-patterns) Utility package for creating reusable implementations of React state provider patterns from hooks.
2021⭐ 147🍴 react-swipeable) React swipe event handler hook.
2744⭐ 72🍴 react-tracked) Simple and fast global state with React Context. Eliminate unnecessary re-renders without hassle.
6⭐ 2🍴 react-uniformed) 🚀 Declarative React forms using hooks.
63⭐ 5🍴 react-use-api) Async HTTP request data for axios. Designed for diverse UI states, SSR and data pre-caching.
5⭐ 0🍴 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.
56⭐ 1🍴 react-use-calendar) A hook for implementing a calendar with events.
265⭐ 15🍴 react-use-clipboard) A hook that copies text to a user's clipboard.
7⭐ 0🍴 react-use-d3) A React hook to use D3.
23⭐ 2🍴 react-use-data-loader) React hook for loading data
3⭐ 1🍴 react-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.
937⭐ 55🍴 react-use-form-state) React hook for managing form and inputs state.
5⭐ 2🍴 react-use-id-hook) React hook for generating SSR-safe unique id strings.
44⭐ 6🍴 react-use-idb) React hook for storing value in the browser using indexDB.
16⭐ 2🍴 react-use-infinite-loader) ♾️ 📃 ⏳ Super lightweight infinite loading (scroll) hook for React apps
6⭐ 0🍴 react-use-input) 🎣 A hook whose setter can be directly given to HTML inputs
15⭐ 0🍴 react-use-lazy-load-image) 🌅 ⚡ Add image lazy loading to your React app with ease
10⭐ 1🍴 react-use-message-bar) A simple React hook for message bars.
21⭐ 8🍴 react-use-modal) React hook for manage modal.
20⭐ 0🍴 react-use-path) The tiniest hook style react router.
46⭐ 4🍴 react-use-scroll-position) React hook for using the scroll position.
26⭐ 1🍴 react-use-trigger) React hook for trigger effect from any place of code
3⭐ 0🍴 react-use-watch) A React hook about triggers once only when dependencies have changed.
5⭐ 1🍴 react-use-wavelet) React hooks for connecting to the Wavelet smart-contract platform
42013⭐ 3163🍴 react-use) Collection of essential hooks.
50⭐ 3🍴 react-useFormless) React hook to handle forms state.
19⭐ 2🍴 react-usemiddleware) React hook for using existing Redux middlewares (like thunk or saga) with useReducer.
891⭐ 34🍴 react-useportal) 🌀 usePortal, React hook for Portals
22⭐ 3🍴 react-user-media) React wrapper for navigator.getUserMedia.
306⭐ 30🍴 react-wait) Complex Loader Management Hook for React Applications.
93⭐ 3🍴 react-window-communication-hook) React hook to communicate among browser contexts (tabs, windows, iframes).
152⭐ 11🍴 react-with-hooks) Ponyfill for the proposed React Hooks API.
?⭐ ?🍴 reaktion) useState like hook for global state management.
145⭐ 11🍴 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.
38⭐ 2🍴 redux-react-hook) React hook for accessing mapped state from a Redux store.
115⭐ 5🍴 region-core) A global state management framework with a hook useProps.
13⭐ 0🍴 rehooks-visibility-sensor) It checks whether an element has scrolled into view or not.
18⭐ 1🍴 resynced) Multiple state management using React Hooks API.
🌎 reto Flexible and efficient React store with hooks.
14⭐ 0🍴 rrh) Super Simple React Hooks for react-redux.
2185⭐ 83🍴 rxjs-hooks) An easy way to use RxJS v6+ with react hooks.
142⭐ 8🍴 scroll-data-hook) Returns information about scroll speed, distance, direction and more.
14⭐ 1🍴 style-hook) 🎨 wirte css in js with react hooks.
30636⭐ 1222🍴 swr) React Hooks library for remote data fetching.
4400⭐ 118🍴 the-platform) Browser API's turned into React Hooks and Suspense-friendly React elements for common situations.
302⭐ 6🍴 trousers) 👖 A hooks-first CSS-in-JS library, focused on semantics and runtime performance
159⭐ 6🍴 use-abortable-fetch) React hook that does a fetch and aborts when the components is unloaded or a different request is made.
15⭐ 1🍴 use-action) Almost same to useEffect, but not deferred.
65⭐ 1🍴 use-as-bind) React hook for using as-bind with a WASM source.
143⭐ 9🍴 use-async-memo) React hook for generating async memoized data.
7⭐ 0🍴 use-autocomplete) A React hook for returning autocomplete values for a search string within an array.
32⭐ 9🍴 use-axios-react) React CRUD hooks for axios, comprehensive list of examples
11⭐ 0🍴 use-boolean) Convenient helpers for handling boolean state.
3⭐ 1🍴 use-browser-history) A React hook to handle browser history events.
31⭐ 7🍴 use-cart) A React hook that gives you shopping cart functionality.
78⭐ 2🍴 use-click-away) React hook when you want a callback invoked when a DOM element was not clicked.
180⭐ 11🍴 use-clippy) A React hook to reading from and writing to the user's clipboard.
2699⭐ 61🍴 use-context-selector) React useContextSelector hook in userland.
3⭐ 0🍴 use-controlled-input-number) React hook to turn numeric input behavior into pretty much what you expect.
25⭐ 2🍴 use-countries) Custom react hook to list countries and languages.
3023⭐ 113🍴 use-debounce) A debounce (and throttle) hook for React.
237⭐ 6🍴 use-deep-compare) It's react's useEffect/useMemo/useCallback hooks, except using deep comparison on the inputs.
1883⭐ 84🍴 use-deep-compare-effect) 🐋 It's react's useEffect hook, except using deep comparison on the inputs, not reference equality.
59⭐ 2🍴 use-detect-print) React hook to detect when a page is being printed.
32⭐ 3🍴 use-dimensions) React Native hook for getting screen and window dimensions.
19⭐ 1🍴 use-double-click) React hook for continuous double-clicks and combining click and double-click events
57⭐ 7🍴 use-eazy-auth) React hooks for handle auth stuff.
492⭐ 16🍴 use-events) A set of React Hooks to handle mouse events.
183⭐ 11🍴 use-force-update) React hook for forcing re-render of a functional Component.
18⭐ 2🍴 use-hotkeys) HotKeys.js React Hook that listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts.
13⭐ 0🍴 use-hovering) Simple, accessible React hook for tracking hover state.
2314⭐ 114🍴 use-http) 🐶 useFetch, React hook for making isomorphic http requests.
4102⭐ 96🍴 use-immer) A hook to use 27786⭐ 852🍴 immer) to manipulate state.
3⭐ 0🍴 use-input-file) React hook for creating input file.
44⭐ 5🍴 use-is-mounted-ref) useIsMountedRef is a React Hook to check when the component is mounted.
1⭐ 1🍴 use-lang-direction) A hook that reads the HTML element's dir attribute value and any updates to that value allowing you to update your UI accordingly.
124⭐ 11🍴 use-last-fm) A hook to show your current playing song from Spotify or any other site 🌎 last.fm supports in realtime. ♪
275⭐ 20🍴 use-lilius) A headless calendar hook for React.
522⭐ 24🍴 use-media) CSS media queries with React hook.
23⭐ 3🍴 use-mouse-action) React Hooks to listen to both mouse down or up and click events with a once called function.
8⭐ 1🍴 use-multiselect) Manage multiselect state.
29⭐ 5🍴 use-overflow) A React Hook that allows you to detect X and Y overflow
1258⭐ 65🍴 use-places-autocomplete) 📍 React hook for Google Maps Places Autocomplete.
37⭐ 10🍴 use-popper) React hook wrapper around Popper.js.
2171⭐ 96🍴 use-query-params) A React Hook for managing state in URL query parameters with easy serialization.
80⭐ 4🍴 use-react-modal) 🖼 useModal, React hook for Modals/Dialogs/Lightboxes
567⭐ 30🍴 use-react-router) React Hook for pub-sub behavior using React Router.
13⭐ 0🍴 use-reactive-state) useReactiveState() - a reactive alternative to React's useState().
178⭐ 9🍴 use-reducer-async) React useReducer with async actions
62⭐ 4🍴 use-redux) A hook to bind 🌎 redux.
?⭐ ?🍴 use-scroller) React hook that automatically adds the next page, saving users from a full page load.
109⭐ 4🍴 use-scroll-to-bottom) React hook for detecting when an element was scrolled to bottom.
30⭐ 1🍴 use-simple-undo) Simple implementation of undo/redo functionality.
197⭐ 26🍴 server-push-hooks) 🔥 React hooks for 🌎 socket.io, 🌎 SEE and more to come
51⭐ 10🍴 use-socket.io-client) React hook for socket.io-client, manipulate 🌎 socket.io client without any side effect.
140⭐ 10🍴 use-sse) ✨useSSE - use Server-Side Effect. useEffect both on client and server side.
261⭐ 7🍴 use-ssr) ☯️ React hook to determine if you are on the server, browser, or react native.
11⭐ 2🍴 use-state-snapshots) A React hook to keep track of state changes for undo/redo functionality.
99⭐ 1🍴 use-substate) React hook for subscribing to your single app state (works with your current 🌎 Redux app).
17⭐ 0🍴 use-suspender) Execute asynchronous actions with 🌎 React.Suspense
44⭐ 2🍴 use-t) Multi-language using hooks.
397⭐ 23🍴 use-undo) React hook to implement Undo and Redo functionality.
11⭐ 1🍴 use-videocard) React hook to fetch the graphics card information of the client using canvas
1⭐ 0🍴 use-window-blur-change-title) React Hook for set the page title when the user is shifting focus away from the current window.
1289⭐ 98🍴 useDarkMode) A custom React Hook to help you implement a "dark mode" component.
3⭐ 0🍴 useDeferredState) A React hook for deferring state change. That's essential when your UI needs to wait for disappearing animation is complete to unmount component.
5⭐ 0🍴 useDropZone) React hook that allows you to set simple drag and drop functionality.
37⭐ 4🍴 useEmailAutocomplete) 📬 React hook for email autocomplete inputs.
6⭐ 2🍴 useFileDialog) Open file dialog without struggling with file input using useFileDialog react hook
5103⭐ 186🍴 useInView) React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.
9⭐ 1🍴 useIsTyping) Hook to see if the user is typing within a textarea or input
24⭐ 2🍴 useKeyCapture) ⌨️ A simple hook to make keyDown listening event easier.
23⭐ 4🍴 usePosition) React hook to get position top left of an element.
?⭐ ?🍴 useReducerWithEffects) React Hook that colocates reducer and side effects
0⭐ 0🍴 useReducerWithLocalStorage) React hook that adds local storage support to the useReducer hook
15⭐ 1🍴 useScreenType) Determining screen size type for Bootstrap 4 grid.
12⭐ 8🍴 useScreenType) React hook to dynamically get current screen type (mobile, tablet, desktop) with configurable breakpoint support.
319⭐ 18🍴 useScrollSpy) React hook to automatically update navigation based on scroll position.
15⭐ 6🍴 useServiceWorker) A React hook which can register a service worker
2⭐ 0🍴 useValueAfter) Very simple React hook to easily provide different props to a component (comes in handy for testing edge cases)
2⭐ 0🍴 useWaitForElements) A simple hook to wait for elements to be rendered with MutationObserver.
5⭐ 1🍴 useWindowOrientation) A hook returning the window's orientation (portrait vs. landscape) based off of current window dimensions
7⭐ 1🍴 useWindowWidthBreakpoints) A hook for using (Bootstrap-inspired) window width breakpoints

Source

9907⭐ 774🍴 rehooks/awesome-react-hooks)

About

Awesome React Hooks. With repository stars⭐ and forks🍴

hooks react react-documentation react-hook-form react-hooks react-hooks-demo react-hooks-project react-hooks-tutorial reactjs reactjs-hooks

Creative Commons Zero v1.0 Universal