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
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):
2️⃣ 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)
3️⃣ 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.
4️⃣ 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.
5️⃣ 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.
6️⃣ 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.
7️⃣ 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.
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
- My Substack (here I publish more in-depth articles)
Top comments (9)
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.
Thanks for sharing that one! I have to try it tomorrow, probably it will be added in the next article of the series ;)
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/
Great article Naubit.
I gotta try these soon.
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.
I would recommend useGesture
I wouldn't say any of these are "small" but nice article!
Very nice topic thanks
Great !! Thanks for sharing. I am very interested by hooks and testing libraries
I like that library "React Lazy Load Image Component". Thanks for the article :) Great!