DEV Community

Cover image for 7 Small & Underrated React Libraries 🔥
Al - Naucode
Al - Naucode

Posted on

7 Small & Underrated React Libraries 🔥

Hey! Welcome back to my daily article! Today we will talk about React. But not about React.js concepts, best practices, or so. Today I will talk about 7 small and underrated React libraries that I like to use and that you might like.

Of course, you may already know some of them since I didn't pick the smallest ones. I tried to balance being less known and popular enough to be maintained.

Also, you probably have others you know, so feel free to answer to share yours; I will try to add them to the following article of this series!

1️⃣ React Testing Library

React Testing Library

It is a lightweight testing library that makes it really easy to test React components. Oh, it also provides a simple and intuitive API for testing them, making the process even easier!

It is designed to be used with Jest, a popular testing framework for React.

As always, here is a code example using it (don't worry, after the example, you have a link to the project, so you can check it in depth):

🔗 Official Website

2️⃣ React Hook Form

React Hook Form

This is a cool one. This is a library that makes really easy to handle form state in React.

Basically, it provides a simple API for handling form state and validation, and it is built using React hooks.

Another pro is it has a small size and is very efficient! (It also works in React Native)

🔗 Official Website

3️⃣ React Scroll

React Scroll

As you will expect, this library is for scrolling. Basically, it helps to implement smooth scrolling in React apps. It provides an easy API (but with lots of optional settings) and is lightweight.

🔗 Official Website

4️⃣ React Transition Group

React Transition Group

This one is for implementing animations. Well, not every kind (for that, I recommend checking Framer Motion) but transitions.

If you need quick and easy animations, I recommend checking this one.

🔗 Official Website

5️⃣ React Lazy Load Image Component

React Lazy Load Image Component

Well, this one already says what it does in the title, but yeah, it helps implement lazy loading for images in your React app.

As you may know, it can help improve your website's performance by only loading images when needed. Quick and easy.

🔗 Official Website

6️⃣ React Easy Edit

React Easy Edit

Now we have a library that you will use in very few particular cases, but hey, it is always good to know!

It is a library for implementing inline editing in React. It is really easy to use.

🔗 Official Website

7️⃣ React Beautiful Dnd

React Beautiful Dnd

This library is not that small, and it is very popular but... I really wanted to add it. I know there are lots of "drag-and-drop" libraries out there, but this one is really easy to use; it is beautiful and customizable. Oh, and done by Atlassian (the creators of Trello and Jira, both apps use this library).

No code example since it is better to check all their examples here.

🔗 Official Website

So, yeah, that is all the article. A short one, but I hope it was helpful and that you discovered at least one exciting library. I really enjoy doing this series; I will continue publishing more soon so... make sure to follow if you liked it!

And if you know others small libraries like these, share them here so I can test and add them to the next article!

🌎 Let's Connect!

Top comments (11)

martyroque profile image
Marty Roque

Great article! I’m definitely checking out React Beautiful DnD! Looks cool and interesting!

Another small library I love to use on my projects is App’s Digest; a simple, atomic state management for React.

naucode profile image
Al - Naucode

Thanks for sharing that one! I have to try it tomorrow, probably it will be added in the next article of the series ;)

balazssoltesz profile image
Balazs Soltesz

React Beautiful DnD is not under active maintenacnce. If you wanna try out a really cool and performant dnd lib check this one:

coderamrin profile image

Great article Naubit.
I gotta try these soon.

nexxeln profile image
Shoubhit Dash

I cannot imagine reccommending react-beautiful-dnd. It's a dead project only being maintained by atlassian because they use it. Please don't use it.

Image description

I would recommend useGesture

stianhave profile image
Stian Håve

I wouldn't say any of these are "small" but nice article!

catherinegs profile image

Great !! Thanks for sharing. I am very interested by hooks and testing libraries

lico profile image
SeongKuk Han

I like that library "React Lazy Load Image Component". Thanks for the article :) Great!

hashika2 profile image
Hashika Maduranga

Very nice topic thanks

fodin profile image

Don't use React Beautiful Dnd. It's deprecated. Use react-dnd.

sirneij profile image
John Owolabi Idogun

Welcome to the community 🙂