DEV Community

Cover image for 16 Libraries You Should Know as a React Developer ๐Ÿ’ฏ๐Ÿ”ฅ
Madza
Madza Subscriber

Posted on โ€ข Originally published at madza.hashnode.dev

560 1 1 1

16 Libraries You Should Know as a React Developer ๐Ÿ’ฏ๐Ÿ”ฅ

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem.

In this article I've compiled some of the most useful React component libraries that you could use to speed up your developer workflow.

Those will include anything from working with forms, charts, calendars, tables, guides, popups, colors, animations, music, images and so much more.

1. react-hook-form

chrome_6zm03XnOFl.png

React Hooks for form state management and validation.

2. recharts

chrome_2HDy5dsLMn.png

Redefined chart library built with React and D3.

3. react-big-calendar

chrome_xEM8R0gL5Q.png

An events calendar built for React and modern browsers.

4. react-beautiful-dnd

chrome_VckIuWDFlZ.png

Beautiful and accessible drag and drop for lists with React.

5. react-table

chrome_URO6VlKROp.png

A library for building powerful tables and data grids.

6. react-joyride

chrome_6e4aOKRntX.png

Create guided tours for your apps.

7. react-advanced-cropper

chrome_gOSWPr14fU.png

Create customized crops for your designs.

8. react-colorful

chrome_snTqunJBZr.png

A tiny, dependency-free, fast and accessible color picker component.

9. react-spring

chrome_GAZKGd7L16.png

Spring-physics based animation library for React applications.

10. react-tsparticles

chrome_7WFrC6NlLA.png

Easily create highly customizable particles animations.

11. react-popper

chrome_R4ez2qwj0e.png

Position tooltips and popovers in an elegant, performant manner.

12. react-pdf-viewer

image.png

A PDF viewer made for React.

13. react-i18next

image.png

Internationalization for React done right.

14. react-icons

image.png

SVG react icons of popular icon packs.

15. audio-player

image.png

Music player with custom controls, playlist, filters, and search.

16. image-slider

image.png

Image slider component for your pictures.


Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on Twitter, LinkedIn and GitHub!

Visit my Blog for more articles like this.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, weโ€™ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, weโ€™ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (62)

Collapse
 
lwhiteley profile image
Layton Whiteley โ€ข

cool selection.

i used react-beautiful-dnd in the past and probably still in some legacy code somewhere but for new projects, better go with something like github.com/clauderic/dnd-kit.

react-beautiful-dnd is no longer maintained

Collapse
 
mricaldip profile image
Mauricio Ricaldi โ€ข

Thank you so much for sharing that. It is a good help ;-)

Collapse
 
madza profile image
Madza โ€ข

๐Ÿ‘โœจ

Collapse
 
madza profile image
Madza โ€ข

Thanks for sharing, useful input ๐Ÿ‘๐Ÿ’ฏโœจ

Collapse
 
ritikbanger profile image
Ritik Banger โ€ข

I have an another package that you would love to add in your list:

React18-input-otp

A fully customizable, one-time password (OTP) and phone number with separator input component for the web built with React. Tested on Web, Android, and iOS. This package supports all react versions.

Collapse
 
madza profile image
Madza โ€ข

Thanks for the addition ๐Ÿ‘โค๐Ÿ’ฏ

Collapse
 
marklai1998 profile image
Mark Lai โ€ข โ€ข Edited

beautiful-dnd is not being actively maintained anymore

Now the hottest lib for this is dnd-kit

Collapse
 
madza profile image
Madza โ€ข

Awesome share, thanks a lot ๐Ÿ‘โœจ๐Ÿ’ฏ

Collapse
 
lukethacoder profile image
Luke Secomb โ€ข

Someone already mentioned react-query, tanstack-table is also amazing - especially if you arent purely working in react. Headless tables - so bring your own framework.

Collapse
 
madza profile image
Madza โ€ข

Awesome share ๐Ÿ‘๐Ÿ’ฏโœจ

Collapse
 
adamaslan profile image
Adam Aslan โ€ข

Lot of gems listed here!

I thought all sliders/ carousels are kinda deprecated because of accessibility concerns. Was thinking a library like...oh say Redux would be something should at least know of as a react developer...

Collapse
 
madza profile image
Madza โ€ข

Thanks a lot for you input ๐Ÿ‘โœจ๐Ÿ’ฏ

Collapse
 
devrauluis profile image
Raul Luis โ€ข

I would also add formik to this list.

Collapse
 
madza profile image
Madza โ€ข

Awesome addition, thanks ๐Ÿ‘โœจ๐Ÿ’ฏ

Collapse
 
bartoszkrawczyk2 profile image
Bartosz Krawczyk โ€ข

Great list.

I would add tanstack-query (aka react-query)

Collapse
 
madza profile image
Madza โ€ข

Thanks for the addition ๐Ÿ‘โœจ๐Ÿ’ฏ

Collapse
 
thremulant profile image
Daniel Pescador โ€ข

I'll replace image-slider with Swiper, but everything else made a good list.

Collapse
 
madza profile image
Madza โ€ข

Thank you so much, Daniel! ๐Ÿ‘๐Ÿ’ฏโœจ

Collapse
 
sarma_akondi_746f338b83b7 profile image
Sarma Akondi โ€ข

Thanks a lot - sharing is caring ๐Ÿ˜Š

Collapse
 
madza profile image
Madza โ€ข

So happy you liked it ๐Ÿ‘๐Ÿ’–๐Ÿ’ฏ

Collapse
 
adrienbaston profile image
Adrien Baston โ€ข

Thanks for sharing these, super helpful!

Collapse
 
madza profile image
Madza โ€ข

My pleasure, thanks a lot ๐Ÿ‘๐Ÿ’ฏโœจ

Sentry image

See why 4M developers consider Sentry, โ€œnot bad.โ€

Fixing code doesnโ€™t have to be the worst part of your day. Learn how Sentry can help.

Learn more

๐Ÿ‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Communityโ€”every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple โ€œthank youโ€ goes a long wayโ€”express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay