DEV Community

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

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 (9)

Collapse
 
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.

Collapse
 
naubit profile image
Al - Naubit

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

Collapse
 
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: dndkit.com/

Collapse
 
coderamrin profile image
Amrin

Great article Naubit.
I gotta try these soon.

Collapse
 
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

Collapse
 
stianhave profile image
Stian Håve

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

Collapse
 
hashika2 profile image
Hashika Maduranga

Very nice topic thanks

Collapse
 
catherinegs profile image
catherinegs

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

Collapse
 
lico profile image
SeongKuk Han

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

11 Tips That Make You a Better Typescript Programmer

typescript

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!