33 React Libraries Every React Developer Should Have In Their Arsenal
Published: 2022-10-05 11:12:41

You can't become React developer by just writing all the software with the React alone but you've to use all the amazing React libraries that well-tested and maintained by other developers. And in today' post, I'm going to introduce to 33 amazing React libraries that every React developer should be familiar. Enjoy and share your feedback!

# 1. [formik](https://formik.org/)
![formik home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/caoitvh41nrfsn1sdlaa.png)

Formik is the world's most popular open source form library for React and React Native.

# 2. [react-select](https://react-select.com/home)
![react-select home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/086r4tucqzrhqzq64ztj.png)

A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support.

# 3. [framer-motion](https://www.framer.com/motion/)
![framer motion home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnz3hrjgbc53y41zd37a.png)

A production-ready motion library for React.

# 4. [chakra-ui](https://chakra-ui.com/)
![chakra-ui homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qp41080m0ihsar5zic8c.png)

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

# 5. [material-ui](https://mui.com/)
![material-ui home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owwsu8q3x7tw0bxj2m8m.png)

MUI offers a comprehensive suite of UI tools to help you ship new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

# 6. [react-icons](https://react-icons.github.io/react-icons)
![react-icons home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8v26dj9dapagailzoqsq.png)

Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

# 7. [recharts](https://recharts.org/en-US/)
![recharts home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7hkvxcc9f7uebs7lp8ke.png)

A composable charting library built on React components

# 8. [react-responsive-carousel](http://react-responsive-carousel.js.org/)
![carousel home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1wnwt20riackj737knh.png)

Responsive carousels for react 

# 9. [react-calendar](https://projects.wojtekmaj.pl/react-calendar/)
![react-calendar home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnth81rctj50ypvlwkvh.png)

Ultimate calendar for your React app

# 10. [full-calendar](https://fullcalendar.io/)
![full calendar home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iwm452xy19pp0cttj3v9.png)

FullCalendar generates real React virtual DOM nodes so you can leverage Fiber, React's highly optimized rendering engine.

# 11. [video-react](https://video-react.js.org/)
![video react home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b83sd41z7ctzs8yung3e.png)

The web video player built from the ground up for an HTML5 world using React library.

# 12. [react-password-strength](https://www.npmjs.com/package/react-password-strength)
![password strength checker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/as62t67kkkedema7lya3.png)

A password strength indicator field using zxcvbn to calculate a password strength score.

# 13. [email.js](https://www.emailjs.com/)
![email js home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/reodlc54flpeiugw4g40.png)

Send Email Directly From JavaScript. No server code needed. Focus on things that matter!

# 14. [react-drag-drop-files](https://www.npmjs.com/package/react-drag-drop-files)
![react drag and drop files home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7x4mni8taazdcjb98zo.png)

Light and simple reactjs drag and drop files library to use with very flexible options to change, so you put whatever the design you want for your drop-area. Users can drag and drop or even select the file anywhere in the window.

# 15. [react-dnd](https://react-dnd.github.io/react-dnd/about)
![react draga drop home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3phu18puvepits3d1gaf.png)

React DnD is a set of React utilities to help you build complex drag and drop interfaces while keeping your components decoupled.

# 16. [react-i18next](https://react.i18next.com/)
![react-i18next home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sbsn0zpl9v4l9cy9dbzo.png)

react-i18next is a powerful internationalization framework for React / React Native which is based on i18next. Check out the history of i18next and when react-i18next was introduced.

# 17. [react-virtualized](https://www.npmjs.com/package/react-virtualized)
![react virtualized](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/acp3ac70nq1451za2yfx.png)

React components for efficiently rendering large lists and tabular data. Check out the demo for some examples.

# 18. [react-testing-library](https://testing-library.com/)
![react testing library home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pugb3ym0e3s1bx3o3psb.png)

Simple and complete testing utilities that encourage good testing practices

# 19. [react-image-file-resizer](https://www.npmjs.com/package/react-image-file-resizer)
![react image file resizer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ed4dyimo5wqhzarp2b0f.png)

react-image-file-resizer is a react module that can rescaled local images. You can change image's width, height, format, rotation and quality.
It returns resized image's new base64 URI or Blob. The URI can be used as the source of an <Image> component.

# 20. [react-table](https://react-table-v7.tanstack.com/)
![react table home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88ae04gi2dot7tso59ef.png)

Lightweight and extensible data tables for React. Build and design powerful datagrid experiences while retaining 100% control over markup and styles.

# 21. [react-markdown](https://www.npmjs.com/package/react-markdown)
![react markdown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h547dvqjxvq3d2c3uw92.png)

React component to render markdown.

# 22. [react-router-dom](https://reactrouter.com/en/main)
![react router dom home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxzmbz06o83x784c6epo.png)

React Router Dome that enables "client side routing".

# 23. [react-pdf](https://projects.wojtekmaj.pl/react-pdf/)
![react pdg viewer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2b82c7a390nyv6br3sy.png)

Easily display PDFs in your React app

# 24. [react-h5-audio-player](https://www.npmjs.com/package/react-h5-audio-player)
![react html5 audio player](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxki1g8wlbgew2lcypr2.png)

React HTML5 audio player component that provides consistent UI/UX on different browsers. Super customizable layout. Flexbox css with SVG icons. Mobile friendly. I18n and a11y supported, keyboards events supported. Support Media Source Extensions (MSE) and Encrypted Media Extensions (EME). Written in TypeScript.

# 25. [react-virtual](https://tanstack.com/virtual/v3/?from=reactVirtualV2&original=https://react-virtual-v2.tanstack.com/)
![react virtual](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wqscgexkehxs8yqe79w.png)


Virtualize only the visible DOM nodes within massive scrollable elements at 60FPS in TS/JS, React, Vue, Solid & Svelte while retaining 100% control over markup and styles.

# 26. [react-query](https://react-query-v3.tanstack.com/)
![react query](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2s386skzxjdu1lyjt00.png)

Performant and powerful data synchronization for React.  Fetch, cache and update data in your React and React Native applications all without touching any "global state".

# 27. [storybook](https://storybook.js.org/)
![storybook home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93qxubdvdan3ileag7cx.png)

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free.

# 28. [react-popup](https://react-popup.elazizi.com/)
![react popup home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0gyq83fchnohpj7qtz8s.png)

reactjs-popup is a simple React popup component that help you create simple and complex Modals, Tooltips and Menus for your next React App.

# 29. [react-mantine](https://mantine.dev/)
![react mantine home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xp7frry9857ct704ywi3.png)

A fully featured Reactt component library. Build fully functional accessible web applications faster than ever – Mantine includes more than 100 customizable components and 40 hooks to cover you in any situation

# 30. [react-leaflet](https://react-leaflet.js.org/)
![react leaflet home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jjvo1ft6z6fohexd6xy.png)

React components for Leaflet maps

# 31. [react-admin](https://marmelab.com/react-admin/)
![react admin home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1474c2hz5iiw69jniyg1.png)

React-admin offers the best developer experience, lets you focus on business needs, and build delightful user interfaces.

# 32. [react-tooltip](http://react-component.github.io/tooltip/)
![react tooltip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ci1eywffbq2fv0hjmvf5.png)

Simple react tooltip library for React

# 33. [react-image-cropper](https://www.npmjs.com/package/react-image-crop#installation)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6t73zpx9rf5mag9pmpg7.png)

An image cropping tool for React with no dependencies.