Awesome Things Related To React Hooks 😍
Tags: javascript, react, reacthooks, github
Published: 2021-09-23 07:32:55

<p align="center">
  <br>
  <img width="400" src="https://i.ibb.co/WPzCqxY/react-hooksmeme.jpg" alt="meme of react hooks">
  <br>
  <br>
</p>

# awesome-react-hooks

A curated list of awesome things related to React Hooks 

# Resources


## Official

- [Official Documentation](https://reactjs.org/docs/getting-started.html)

## Related awesome lists
- [General](https://github.com/rehooks/awesome-react-hooks)

## Articles

- [React Js Resize, Compress and Crop Image Size Tutorial](https://www.positronx.io/react-js-resize-compress-and-crop-image-size-tutorial/)
- [How to use React useReducer hook like a pro](https://dev.to/pierreouannes/how-to-use-react-usereducer-hook-like-a-pro-3ll3)
- [Create an NPX CLI Portfolio under 5 minutes](https://blog.anishde.dev/create-an-npx-cli-portfolio-under-5-minutes)
- [React Router - A Beginner Guide](https://codeman.hashnode.dev/react-router-a-beginner-guide)
- [A headless calendar hook for React](https://reactjsexample.com/a-headless-calendar-hook-for-react/)
- [6 use cases of the useEffect ReactJS hook](https://dev.to/colocodes/6-use-cases-of-the-useeffect-reactjs-hook-282o)
- [Credit Card Payment UI With ReactJS](https://dev.to/hyggedev/credit-card-payment-ui-with-reactjs-1a5a)
- [React 18 - What's New!](https://dev.to/iamraufu/react-18-what-s-new-2jam)
- [Score Football React Hooks](https://dev.to/said_mounaim/score-football-react-hooks-i4e)
- [React Redux Filtering](https://dev.to/said_mounaim/react-redux-filtering-4adc)
- [React Hooks vs. Vue 3 Composition API](https://academy.esveo.com/en/blog/Yr)
- [A Lightweight carousel component for react](https://reactjsexample.com/a-lightweight-carousel-component-for-react/)
- [Top 5 React chart libraries](https://blog.logrocket.com/top-5-react-chart-libraries/)
- [How to Reduce React App Loading Time By 70%](https://nilanth.hashnode.dev/how-to-reduce-react-app-loading-time-by-70)
- [React: Scroll Transition for Fancy Portfolios](https://dev.to/holdmypotion/react-scroll-transition-for-fancy-portfolios-37fg)
- [React Query Error Handling](https://dev.to/tkdodo/react-query-error-handling-10go)
- [6 Ways to Host Your React JS App For Free](https://blog.suhailkakar.com/6-ways-to-host-your-react-js-app-for-free)
- [React Query vs SWR](https://javascript.plainenglish.io/react-query-vs-swr-36743c14ba7e)
- [Build an Instagram-like infinite scrolling feed with React Query](https://blog.logrocket.com/build-instagram-infinite-scrolling-feed-react-query/)
- [How to Use useMemo Hook in React](https://enlear.academy/usememo-react-hook-a88f2e236eff)
- [Simple way to write forms in React with Formik](https://dev.to/hamid2117/simple-way-to-write-forms-in-react-with-formik-547d)
- [Top ways to learn Vue 3](https://www.vuemastery.com/blog/top-ways-to-learn-Vue-3/)
- [A useModal hook and Proxies](https://lmiller1990.github.io/electic/posts/20200519_a_usemodal_hook_and_proxies.html)
- [Responsive Portfolio Template Made With Reactjs](https://reactjsexample.com/responsive-portfolio-template-made-with-reactjs/)
- [A clean and simple portfolio template using React for developers](https://reactjsexample.com/a-clean-and-simple-portfolio-template-using-react-for-developers/)
- [A Simple Calculator app created with React.js](https://reactjsexample.com/a-simple-calculator-app-created-with-react-js/)
- [How to Use useRef Hook in React](https://enlear.academy/the-useref-hook-practical-explanation-ef333180dcbb)
- [useState in React: A complete guide](https://javascript.plainenglish.io/usestate-in-react-a-complete-guide-98846ef47391)
- [React Tutorial – How to Build the 2048 Game in React](https://www.freecodecamp.org/news/how-to-make-2048-game-in-react/)
- [A Free,Beautiful and Modern React Portfolio Template for Developers](https://reactjsexample.com/a-free-beautiful-and-modern-react-portfolio-template-for-developers/)
- [A curated list of resources to learn React and related web technologies as fast as possible](https://reactjsexample.com/a-curated-list-of-resources-to-learn-react-and-related-web-technologies-as-fast-as-possible/)
- [A starter for React + Vite + twin.macro](https://reactjsexample.com/a-starter-for-react-vite-twin-macro/)
- [useTgl: a React Hook toggle component visibility](https://reactjsexample.com/usetgl-a-react-hook-toggle-component-visibility/)
- [Build a fully functional eCommerce application using react and commerce.js](https://reactjsexample.com/build-a-fully-functional-ecommerce-application-using-react-and-commerce-js/)
- [A react app for developers to store coding-related 'snippets' like code](https://reactjsexample.com/a-react-app-for-developers-to-store-coding-related-snippets-like-code/)
- [A Simple Date Paint Picker for React](https://reactjsexample.com/a-simple-date-paint-picker-for-react/)
- [Create draggable components with React-Draggable](https://blog.logrocket.com/create-draggable-components-react-draggable/)
- [React useUndo hook](https://dev.to/mishrabhavesh/react-useundo-hook-4h34)
- [React hooks for resumable file uploads using tus](https://reactjsexample.com/react-hooks-for-resumable-file-uploads-using-tus/)
- [React 18-Alpha Is Out! This Is What You Need to Know](https://blog.openreplay.com/react-18-alpha-is-out-this-is-what-you-need-to-know)
- [Building custom hooks in React to fetch Data](https://dev.to/shaedrizwan/building-custom-hooks-in-react-to-fetch-data-4ig6)
- [A Bookstore Project Built with React, Redux, and TailwindCSS](https://reactjsexample.com/a-bookstore-project-built-with-react-redux-and-tailwindcss/)
- [A Free Personal Portfolio Page Build Up With React Next.Js](https://reactjsexample.com/a-free-personal-portfolio-page-build-up-with-react-next-js/)
- [A Guide to React Context and useContext() Hook](https://dmitripavlutin.com/react-context-and-usecontext/)
- [Real Time Searching In ReactJS](https://dev.to/shubhamtiwari909/real-time-searching-in-reactjs-3mfm)
- [Infinite scrolling in React with intersection observer](https://dev.to/ms_yogii/infinite-scrolling-in-react-with-intersection-observer-22fh)
- [5 React performance optimization techniques](https://blog.logrocket.com/5-react-performance-optimization-techniques/)
- [7 Projects You Can Build to Learn React in 2021](https://blog.devgenius.io/7-projects-you-can-build-to-learn-react-in-2021-246122ffbd6f)
- [React component for animating an element's children, one by one](https://reactjsexample.com/react-component-for-animating-an-elements-children-one-by-one/)
- [Manage modals just like managing pages with a router in React](https://reactjsexample.com/manage-modals-just-like-managing-pages-with-a-router-in-react/)
- [Recoil — is this the new ‘Redux’ for React?](https://blog.joshsoftware.com/2021/08/30/recoil-is-this-the-new-redux-for-react/)
- [Netflix Clone With React, Styled Components, Axios](https://reactjsexample.com/netflix-clone-with-react-styled-components-axios/)
- [Improve async network state handling with custom React Hooks](https://blog.logrocket.com/improve-async-network-state-handling-custom-react-hooks/)
- [A memory game created with React Styled Components](https://reactjsexample.com/a-memory-game-created-with-react-styled-components/)
- [React 18: Things You Need To Know About React JS Latest Version](https://dzone.com/articles/react-18-things-you-need-to-know-about-react-js-la)
- [How to Use ‘useReducer’ and ‘useContext’: React Hooks Tutorial](https://javascript.plainenglish.io/usereducer-along-with-usecontext-react-hooks-b558be82dd4d)
- [The Greatest React Developer I Ever Met](https://javascript.plainenglish.io/the-greatest-react-developer-i-ever-met-1e58df22bb71)
- [How to send emails from a React app with Netlify Functions](https://blog.logrocket.com/how-to-send-emails-react-app-netlify-functions/)
- [Lazy Loading In React](https://www.c-sharpcorner.com/article/lazy-loading-in-react/)
- [How I set up a Next.js project structure](https://flaviocopes.com/nextjs-project-structure/)
- [Using Styled Components with React](https://www.thisdot.co/blog/using-styled-components-with-react)
- [React isn't fast, let's learn why](https://jai-dewani.hashnode.dev/react-isnt-fast-lets-learn-why)
- [Create React App without create-react-app !](https://dev.to/riddhiagrawal001/create-react-app-without-create-react-app-2lgd)
- [Client- and Server-Side Data Fetching in React](https://dev.to/fenok/client-and-server-side-data-fetching-in-react-4o7d)
- [React-Calendar tutorial: Build and customize a simple calendar](https://blog.logrocket.com/react-calendar-tutorial-build-customize-calendar/)
- [Tic Tac Toe Online Multiplayer Game Build With React](https://reactjsexample.com/tic-tac-toe-online-multiplayer-game-build-with-react/)


## Packages

- [React Hot Toast](https://react-hot-toast.com/) - The Best Toast in Town. Smoking hot React notifications.
- [React Content Loader](https://skeletonreact.com/) - SVG-Powered component to easily create placeholder loadings (like Facebook’s cards loading).
- [React Filepond](https://pqina.nl/filepond/) - A new way to upload files
- [React Notion X](https://github.com/NotionX/react-notion-x) - Fast and accurate React renderer for Notion. TS batteries included. ⚡ ️
- [React Select](https://react-select.com/home) - A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support.
- [Sweet Alert](https://sweetalert.js.org/) - A beautiful replacement for success messages, error messages or info messages
- [React Infinite Scroller](https://danbovey.uk/react-infinite-scroller/) - Infinitely load content using a React Component.
- [React DnD](https://react-dnd.github.io/react-dnd/about) - A React utility to help you build complex drag and drop interfaces while keeping your components decoupled.
- [Draft JS](https://draftjs.org/) - Draft.js fits seamlessly into React applications, abstracting away the details of rendering, selection, and input behavior with a familiar declarative API.
- [ChartJS](https://github.com/reactchartjs/react-chartjs-2) - Build beautiful charts in minutes with Chartjs, Dashboards will looks sexy like never before.
- [React Slick](https://react-slick.neostack.com/) - React carousel component. One of the best sliders out there to showcase anything.
- [React Auto Suggest](http://react-autosuggest.js.org/) - WAI-ARIA compliant autosuggest component built in React
- [React Burger Menu](https://negomi.github.io/react-burger-menu/) - An off-canvas sidebar React component with a collection of effects and styles using CSS transitions and SVG path animations.
- [React Spinners](https://www.davidhu.io/react-spinners/) - A collection of loading spinner components for react
- [React Bootstrap Datatable](https://react-bootstrap-table.github.io/react-bootstrap-table2/) - Next Generation of react-bootstrap-table. Datatable made easy like never before.
- [Styled Components](https://styled-components.com/) - styled-components is the result of wondering how we could enhance CSS for styling React component systems.
- [use-abortable-stream-fetch](https://github.com/marconi/use-abortable-stream-fetch) - React hook for fetching streams that can be aborted.
- [React API Hooks](https://github.com/ABWalters/react-api-hooks) - React hooks to interact with an API from a stateless component using axios.
- [React Use Smooth Scroll](https://github.com/saidMounaim/React-Use-Smooth-Scroll) - React Provider Component to add a smooth scroll effect 😍
- [React Use Mail To](https://github.com/saidMounaim/use-mail-to) - Renders a link formatted to send an email (mailto: link).
- [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
- [easy-peasy](https://github.com/ctrlplusb/easy-peasy) - Vegetarian friendly state for React
- [React Hooks Lib](https://github.com/beizhedenglong/react-hooks-lib) - A set of reusable React Hooks.
- [react-powerhooks](https://github.com/kalcifer/react-powerhooks) - Hooks api for react-powerplug components
- [use-events](https://github.com/sandiiarov/use-events) - 🍭 Event hooks
- [react-apollo-hooks](https://github.com/trojanowski/react-apollo-hooks) - Use Apollo Client as React hooks
- [react-recipes](https://github.com/craig1123/react-recipes) - 👩‍🍳 A list of React Hooks utility library containing popular customized hooks
- [react-hookedup](https://github.com/zakariaharti/react-hookedup) - 👽 A collection of useful React hooks
- [react-hooks-axios](https://github.com/use-hooks/react-hooks-axios) - Custom React Hooks for Axios.js
- [rest-hooks](https://github.com/coinbase/rest-hooks) - Delightful data fetching for React.
- [use-call](https://github.com/doasync/use-call) - useCall React hook
- [react-use-clipboard](https://github.com/danoc/react-use-clipboard) - React hook that provides copy to clipboard functionality.
- [constate](https://github.com/diegohaz/constate) - React Context + State
- [rooks](https://github.com/imbhargav5/rooks) - Essential React custom hooks ⚓ to super charge your components!
- [navi](https://github.com/frontarm/navi) - 🧭 Declarative, asynchronous routing for React.
- [react-firebase-hooks](react-firebase-hooks) - React Hooks for Firebase.
- [use-file-input](https://github.com/rot1024/use-file-input) - React Hooks for file selection with hidden <input type="file" />
- [react-hook-form](https://github.com/react-hook-form/react-hook-form) - 📋 React Hooks for forms validation (Web + React Native)
- [react-hooks-image-size](https://github.com/use-hooks/react-hooks-image-size) - Custom React Hooks for image natural size
- [use-key-hook](https://github.com/haldarmahesh/use-key-hook) - React hook to handle all the key press.
- [use-http](https://github.com/ava/use-http) - 🐶 React hook for making isomorphic http requests
- [use-media](https://github.com/streamich/use-media) - useMedia React hook to track CSS media query state
- [use-debounce](https://github.com/xnimorz/use-debounce) - A debounce hook for react
- [local-storage](https://github.com/rehooks/local-storage) - React hook which syncs localStorage[key] with the comp.
- [react-useportal](https://github.com/alex-cory/react-useportal) - 🌀 React hook for Portals
- [REACT ROUTER](https://reactrouter.com/web/api/Hooks) - React Router ships with a few hooks that let you access the state of the router and perform navigation from inside your components.
- [ant-design](https://github.com/ant-design/ant-design) - An enterprise-class UI design language and React UI library
- [chakra-ui](https://github.com/chakra-ui/chakra-ui) - ⚡️ Simple, Modular & Accessible UI Components for your React Applications
- [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) - Bootstrap components built with React
- [Semantic-UI](https://github.com/Semantic-Org/Semantic-UI) - Semantic is a UI component framework based around useful principles from natural language.
- [evergreen](https://github.com/segmentio/evergreen) - 🌲 Evergreen React UI Framework by Segment
- [reakit](https://github.com/reakit/reakit) - Toolkit for building accessible rich web apps with React

For More Check the repo 

https://github.com/saidMounaim/awesome-react-hooks