s-ong-c / awesome-react-hooks

Awesome React Hooks

awesome-react-hooks

Awesome React Hooks Resources

Documentation

• React Hooks Docs

Discussions

• React Hooks RFC

Tutorials

• "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

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

Podcasts

• React Hooks - Syntax

Tools

• 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.)

Catalogs

• 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
• useHooks(🐠) One new React Hook recipe every day.
• Use Hooks A collection of reusable React Hooks.

Packages

• @21kb/react-hooks A set of React Hooks to get hooked on.
• @kevinwolf/formal Elegant form management primitives for the react hooks era.
• @marvelsq/use-properties-hook Instance functions inside FunctionComponent like class-properties and equal in ShallowCompare
• @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 syncs localStorage[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 window x and y position.
• @rehooks/window-size React hook for subscribing to window size.
• @staltz/use-profunctor-state React Hook for state management with Profunctor Optics
• @withvoid/melting-pot React hook utility library.
• constate Transform your local state into global state using useContextState and useContextReducer.
• easy-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.
• promise-hook React hook for simplifying Promise based data fetching.
• react-async-hook React hook to fetch ad-hoc data into your React components.
• react-declare-form React hook based declarative form library.
• react-dom-status-hook React hook for subscribing to the DOMContentLoaded event.
• react-enhanced-reducer-hook An alternative to useReducer 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-mousetrap A hook to trigger callbacks on keys or keys combos, powered by mousetrap.
• react-hookedup A collection of useful React hooks.
• react-hooks-easy-redux React hooks for Redux with Proxy-based auto-detection of state usage.
• react-hook-form Form validation without the hassle.
• react-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-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 Indicative
• react-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-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-request-hook Managed, cancelable and safe-oriented api requests.
• react-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-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 data
• react-use-form-state React hook for managing form and inputs state.
• react-use-idb React hook for storing value in the browser using indexDB.
• react-use-input 🎣 A hook whose setter can be directly given to HTML inputs
• 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-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)
• react-use-trigger React hook for trigger effect from any place of code
• react-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) with useReducer.
• react-user-media React wrapper for navigator.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 hook useProps.
• rehooks-visibility-sensor It checks whether an element has scrolled into view or not.
• resynced Multiple state management using React Hooks API.
• rrh Super Simple React Hooks for react-redux.
• rxjs-hooks An easy way to use RxJS v6+ with react hooks.
• the-platform Browser API's turned into React Hooks and Suspense-friendly React elements for common situations.
• trousers Give your React components some style with Trousers.
• use-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-browser-history A React hook to handle browser history events.
• use-cart A React hook that gives you shopping cart functionality.
• use-clippy A React hook to reading from and writing to the user's clipboard.
• use-debounce A debounce hook for React.
• 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-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-http 🐶 useFetch, a React hook for making isomorphic http requests.
• use-immer A hook to use immer to manipulate state.
• 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-popper React hook wrapper around Popper.js.
• use-react-router React Hook for pub-sub behavior using React Router.
• use-redux A hook to bind redux.
• 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-ssr React hook to determine if you are on the server or browser.
• 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-t Multi-language using hooks.
• use-undo React hook to implement Undo and Redo functionality.
• useDarkMode A custom React Hook to help you implement a "dark mode" component.
• useEmailAutocomplete 📬 React hook for email autocomplete inputs.
• usePortal 🌀 A React hook for using Portals.
• usePosition React hook to get position top left of an element.
• useScreenType Determining screen size type for Bootstrap 4 grid.
• useScrollSpy React hook to automatically update navigation based on scroll position.