README.md

awesome-react-hooks

English | 简体中文

Awesome React Hooks 资源

文档

• React Hooks 文档

讨论

• React Hooks RFC

教程

• "理解 React Hook" by Dan Abramov
• "从 React.Component 到 hook 的转变" by Octave Raimbault
• "使用 React Hook：测试会发生哪些变化？" by Kent C. Dodds
• "使用 React Hook 进行状态管理 —— 不使用 Redux 或者 Context API" by André Gardi
• "如何使用 React Hook 进行数据获取？" by Robin Wieruch
• React Hook 入门
• React Hook —— 深入浅出 useContext 及 useReducer
• "使用自定义 React Hook 来简化表单" by James King
• 用 Axios 测试自定义 React Hook 获取数据
• React Hook 学习指南（示例及教程） by Eric Bishard
• "理智地对 React Hook 进行测试" by Dave Cooper
• React Hook 示例

视频

• 🎬 ReactConf 2018：React 立足现在，展望未来 by Sophie Alpert and Dan Abramov 官方发布 Hook 及 Demo 演示。
• 🎬 ReactConf 2018：90% Cleaner React by Ryan Florence
• 🎬 React Hook：完整介绍 by Harry Wolff
• 🎬 React Hook 视频教程 by Ben Awad
• 🎬 React Hook 视频教程 by Josh Ribakoff
• 🎬 React Hook 视频教程 by Michael Chan
• 🎬 自定义 React Hook by Tanner Linsley

播客

• React Hooks - Syntax (Nov 14th, 2018)
• React Hooks 1 Year Later - Syntax (Mar 18, 2020)
• Why should I use React Hooks? - Syntax (Dec 7th, 2020)

工具

• eslint-plugin-react-hooks
• hooks.macro 使 memoization（记忆化）自动失效的 Babel 宏
• CodeSandbox Starter Kit
• VS Code 中 React Hook 相关的 Snippets
• hook-into-props 构建高阶组件时使用 hook 的 helper。这对在 class 组件中使用 hook 非常有帮助。
• react-universal-hooks React 通用的 Hook：无论函数式组件还是 class 组件，均可使用 use*******。
• Jooks 模拟 React 的 Hook API（例如：useState 等。)对自定义 hook 进行单元测试
• react-hooks-testing-library 为自定义 React Hook 创建单元测试的库。

合集

• @react-hookz/web - A library of general-purpose React hooks built with care and SSR compatibility in mind.
• 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.
• 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.

Packages

• @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 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.
• @rekindle/use-request 🤖 React hook for making request.
• @rkrupinski/use-state-machine A finite state machine hook.
• @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.
• concent State management that tailored for react, it is simple, predictable, progressive and efficient.
• constate Transform your local state into global state using useContextState and useContextReducer.
• conuse Share Hook with Context
• 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.
• modali A delightful modal dialog component for React, built from the ground up to support React Hooks.
• moment-hooks A library containing generic react hooks
• nice-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 Proxy
• react-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-cookie React hooks for universal cookies.
• react-cool-dimensions 📏 React hook to measure an element's size and handle responsive components.
• react-cool-form 📋 React hooks for forms state and validation, less code more performant.
• 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-cool-virtual ♻️ A tiny React hook for rendering large datasets like a breeze.
• react-countdown-hook Dead simple yet powerful countdown hook for React. Powered by requestAnimationFrame.
• react-darkreader 🌓 A React Hook for adding a dark / night mode to your site inspired by darkreader.
• react-declare-form React hook based declarative form library.
• react-deep-hooks React hooks for non-primitive dependencies.
• 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-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 composability
• 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-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 workers
• 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-native-react-bridge A React Native plugin to run React and handle communication between them.
• react-optimistic-ui-hook ⚛️ Minimal "optimistic UI" pattern implementation with a React hook
• react-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-query Hooks for fetching, caching and updating asynchronous data in React.
• react-recaptcha-hook React hook for google-recaptcha v3
• react-recipes 👩‍🍳 Collection of essential hook recipes 🥘
• react-request-hook Managed, cancelable and safe-oriented api requests.
• react-responsive React media query module.
• react-rocketjump Manage state and side effects like a breeze.
• 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
• react-script-hook React hook to dynamically load an external script and know when its loaded
• 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-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-d3 A React hook to use D3.
• react-use-data-loader React hook for loading data
• 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.
• 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 using indexDB.
• react-use-infinite-loader ♾️ 📃 ⏳ Super lightweight infinite loading (scroll) hook for React apps
• react-use-input 🎣 A hook whose setter can be directly given to HTML inputs
• react-use-lazy-load-image 🌅 ⚡ Add image lazy loading to your React app with ease
• react-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 code
• react-use-watch A React hook about triggers once only when dependencies have changed.
• react-use-wavelet React hooks for connecting to the Wavelet smart-contract platform
• 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-useportal 🌀 usePortal, React hook for Portals
• 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.
• 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 performance
• 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-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 examples
• use-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 (and throttle) 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 events
• 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-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's dir 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-lilius A headless calendar hook for React.
• 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 overflow
• use-places-autocomplete 📍 React hook for Google Maps Places Autocomplete.
• use-popper React hook wrapper around Popper.js.
• use-query-params A React Hook for managing state in URL query parameters with easy serialization.
• use-react-modal 🖼 useModal, React hook for Modals/Dialogs/Lightboxes
• use-react-router React Hook for pub-sub behavior using React Router.
• use-reactive-state useReactiveState() - a reactive alternative to React's useState().
• use-reducer-async React useReducer with async actions
• use-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.
• server-push-hooks 🔥 React hooks for socket.io, SEE and more to come
• 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 with React.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 canvas
• use-window-blur-change-title React Hook for set the page title when the user is shifting focus away from the current window.
• useDarkMode A custom React Hook to help you implement a "dark mode" component.
• 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.
• useDropZone React hook that allows you to set simple drag and drop functionality.
• useEmailAutocomplete 📬 React hook for email autocomplete inputs.
• useFileDialog Open file dialog without struggling with file input using useFileDialog react hook
• useInView React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.
• useIsTyping Hook to see if the user is typing within a textarea or input
• useKeyCapture ⌨️ 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 effects
• useReducerWithLocalStorage React hook that adds local storage support to the useReducer hook
• useScreenType 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 worker
• useValueAfter Very simple React hook to easily provide different props to a component (comes in handy for testing edge cases)
• useWaitForElements A simple hook to wait for elements to be rendered with MutationObserver.
• useWindowOrientation A hook returning the window's orientation (portrait vs. landscape) based off of current window dimensions
• useWindowWidthBreakpoints A hook for using (Bootstrap-inspired) window width breakpoints