7 Small & Underrated React Libraries 🔥
Tags: webdev, javascript, react, beginners
Published: 2023-02-03 21:59:38

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](https://cdn-images-1.medium.com/max/800/0*q_7HccxM04dFdBOv.jpg)

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*):

{% embed https://gist.github.com/NauCode/ed03ed64360480f6ec8f289bcef4c096 %}

🔗 [Official Website](https://testing-library.com/docs/react-testing-library/intro/)


## 2️⃣ React Hook Form
![React Hook Form](https://cdn-images-1.medium.com/max/800/0*V7R9AeiYwwAA3ZhE.png)

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*)

{% embed https://gist.github.com/NauCode/1ba5ef8d8833f319d63ab2bf828d3fa2 %}

🔗 [Official Website](https://react-hook-form.com/)


## 3️⃣ React Scroll
![React Scroll](https://cdn-images-1.medium.com/max/800/1*lAcHJ-B6U4b50bhcWXqggQ.png)

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.

{% embed https://gist.github.com/NauCode/0317d3473f866b893af82a5fc0a20301 %}

🔗 [Official Website](https://www.npmjs.com/package/react-scroll)


## 4️⃣ React Transition Group
![React Transition Group](https://cdn-images-1.medium.com/max/800/0*3mQ-cM1lLSEGtd2G.jpg)

This one is for implementing animations. Well, not every kind (*for that, I recommend checking* [*Framer Motion*](https://www.framer.com/motion/)) but transitions.

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

{% embed https://gist.github.com/NauCode/c7da1ce35f9b65ebed054848430a3613 %}

🔗 [Official Website](https://github.com/reactjs/react-transition-group)


## 5️⃣ React Lazy Load Image Component
![React Lazy Load Image Component](https://cdn-images-1.medium.com/max/800/0*0FIJATMysWAubumD.png)

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.

{% embed https://gist.github.com/NauCode/2cc45521cabaad0b6dd61e80e773dd37 %}

🔗 [Official Website](https://www.npmjs.com/package/react-lazy-load-image-component)


## 6️⃣ React Easy Edit
![React Easy Edit](https://cdn-images-1.medium.com/max/800/0*ZGyw0I-h3WY-z0nl)

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.

{% embed https://gist.github.com/NauCode/6d37218c3c77162034120d1dcfdf0b06 %}

🔗 [Official Website](https://github.com/giorgosart/react-easy-edit)


## 7️⃣ React Beautiful Dnd
![React Beautiful Dnd](https://cdn-images-1.medium.com/max/800/0*B601l3uqm4VqDsd0.gif)

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](https://react-beautiful-dnd.netlify.app/?path=/story/single-vertical-list--basic).

🔗 [Official Website](https://github.com/atlassian/react-beautiful-dnd)

* * * * *

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!
-   My [Twitter: @thenaubit](https://twitter.com/thenaubit)
-   [My Substack](https://coderpreneurs.substack.com/) (here I publish more in-depth articles)