DEV Community 👩‍💻👨‍💻

Cover image for 5 Small and Hidden React libraries You Should Already Be Using
Al - Naubit
Al - Naubit

Posted on

5 Small and Hidden React libraries You Should Already Be Using

If you, like me, love finding small gems in the NPM directory to improve your development process, today is your lucky day.

I am starting a new series of articles where I will showcase some small and less-known libraries that I found and use every day that will save you more than one headache.

So, let's start!

1. Urlcat

Urlcat is a tiny Javascript library that makes building URLs very convenient and prevents common mistakes.

Yeah, you could use the URL API to build your URLs. But still, you will have to take care of some details for yourself instead of just building the URL.

That is why I love this library. It is just "plug-and-play." You don't need to learn complicated patterns or spend hours on documentation.

So, feel free to give it a try: https://github.com/balazsbotond/urlcat.

2. UseHooks-ts

UseHooks-ts
If you are a React developer, you are using hooks (I hope). If that is the case, there are probably lots of times you have to create a custom hook for very little things. For example, for handling the dark mode. Or for the window resize event. Or lots of other cases.

UseHooks is a small library with well-coded, well-documented, and fully typed (for Typescript users) hooks for all those small cases, so you focus on the project itself.

You can check it here: https://github.com/juliencrn/usehooks-ts.

3. Logt

Logt
I like to have logs everywhere, so when there is some need to know what is going on, I can check them.

And when I code the front end, I also want those logs. But with some requisites:

  • It must be fully typed (so I can use it in Typescript without any headache)
  • It must be small
  • It must have colorful labels (so I know the log type quickly)
  • It must have log levels
  • It must have some way to hide some logs according to conditions (like if it is a production build or not)
  • It must be possible to send those logs somewhere else (like to Sentry)

After a lot of time spent researching (and almost starting to code my own one), I found Logt, which meets all my requirements, plus a few more.
100% recommended! https://github.com/sidhantpanda/logt

4. Loadable Components

Loadable Components
If you are trying to optimize your React app, you are probably using React.lazy and Suspense to lazy-load the components.

That is fine.

But there are even better ways! For example, this library. Obviously, in this article, I can not give a full explanation about why you should switch from React.lazy to this library but feel free to check this post from the author.

Basically, a few key things are it supports SSR (Server Side Rendering), Library Splitting, and even full dynamic import. Not bad, huh?

And the best thing. It is really easy to use. Almost plug-and-play. So, give it a try! https://github.com/gregberge/loadable-components

5. Emoji Mart

Emoji Mart
When working on different projects, I always have to deal with emojis. It is something used everywhere right now. And I usually have to add some emoji picker component in the project.

That is not complicated. But then you start to receive more requirements: it must lazy-load the emojis, it must support internationalization, it must allow searching, it must allow using the same query text as Slack

And that takes time. I can do it. But the clients usually prefer me to focus on the project itself. So… I found this little library. A beautiful and useful one.

Let me show you, Emoji Mart! https://github.com/missive/emoji-mart


If you are like me, you love finding these kinds of little and useful libraries, easy to use and perfect to integrate with your projects. So, don't worry. I have a big list already ready to share. This is the first 5 of this series. Be sure to follow me to be notified soon when I publish the next ones!

In the meanwhile…

🌎 Let's Connect!

Top comments (24)

Collapse
 
husseinkizz profile image
Hussein Kizz

Thanks for sharing, surely loved this especially the emoji package, will try it out.

Collapse
 
jboxman profile image
Jason Boxman

Thanks for sharing!

Collapse
 
wilmela profile image
Wilmela

Thanks for sharing.

Collapse
 
azooz2014 profile image
Azooz

Thanks for sharing :)

Collapse
 
naubit profile image
Al - Naubit

Glad it helped you!

Collapse
 
dannyfallas profile image
Danny Fallas

I’ll take the change to share my module here npmjs.com/package/@dannyman/use-store , I’ve been using it on many apps that are on production right now and it becomes really helpful on them.

Collapse
 
insidewhy profile image
insidewhy

Why do you base64 encode the data?

Collapse
 
dannyfallas profile image
Danny Fallas

To make it non readable to most of the non tech users in case there is something sensitive there

Thread Thread
 
insidewhy profile image
insidewhy

Doesn't seem worth it. The hit to performance or the inconvenience for debugging.

Also, why shouldn't you be able to read your own data? What's sensitive about that? And it doesn't even stop a and actor from easily reading the data.

Thread Thread
 
naubit profile image
Al - Naubit

Imagine you are debugging and you just use console.log(oneObject, anotherObject, oneVar, "The code took X time to run");

That is not that organized. I am not telling in the article that it will be more comfortable to use. But it will be a little more organized.

And since you should never deploy console.log to a production build, no bad actor should be see them.

In the end, it depends on you if using these methods or not, in this post I am just bringing attention to a few extra functions.

Thread Thread
 
dannyfallas profile image
Danny Fallas

Will think about adding it as an option.
For the business logic when created, it was needed. Don’t want to give out data easily to everyone if you are in a shared computer , the idea is to add better encryption later.

Collapse
 
lovepreetsingh profile image
Lovepreet Singh

Thanks, Really helpful.

👉 Kindly check my blog too and suggest any improvements dev.to/lovepreetsingh/what-is-dock...

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

Thanks for the post. I have bookmarked it because I will be exploring that Logt package in more detail.

I have a counter offer for you: Instead of urlcat, use wj-config. It will do what urlcat does, but it does this from per-environment configuration values. It takes care of your configuration data in the same way .Net Configuration does, relieving you from having a million fake environment variables in .env files, plus you get the URL functions that do route value replacement and query string addition.

Collapse
 
naubit profile image
Al - Naubit

Oh, sounds like a package I need to try! I will check it tomorrow, hopefully in the next chapter of this series it will be added

Collapse
 
grzesiekds profile image
grzesiek-ds

React-loadable literally says that you should migrate to React.lazy since its not maintained for quite long time. Please do not recommend others a deprecated libraries, Reading docs does not hurts.

Collapse
 
naubit profile image
Al - Naubit

Yeah, React-loadable is deprecated. Loadable-components is not the same library. In fact, React-loadable recommends to migrate to React.lazy or loadable-components. This is the one you say (npmjs.com/package/react-loadable) and this is the one I talk about: github.com/gregberge/loadable-comp...

Collapse
 
shifi profile image
Shifa Ur Rehman

Ohohohoho! Sick burn!

Collapse
 
noodleofdeath profile image
NoodleOfDeath

Please read the docs yourself? react-loadable is not the same as @loadable/components

Collapse
 
yaireo profile image
Yair Even Or

Dunno this LogT, but I know a much better one:

github.com/yairEO/console-colors

Collapse
 
ayomiku222 profile image
ayomiku olatunji

You are fantastic 😊. I forked all the libraries because they can be useful to everyday coding life.

Collapse
 
idosius profile image
Ido Schacham • Edited on

urlcat looks cute. Nonetheless, it is not tiny - 10.5 KB minified and gzipped. I would expect 'tiny' to be below 1 KB or something similar, especially for such a specific low functionality library.

Collapse
 
yukikimoto profile image
Yuki Kimoto - SPVM - Perl Club • Edited on

Thanks.

Recently I wrote the article using React with Mojolicious that is a Perl web frame work.

Collapse
 
vasu7389 profile image
Vasu Awasthi
Collapse
 
manadaym profile image
Manaday Mavani

Excellent gems! Thanks for sharing. 😊

We want your help! Become a Tag Moderator.
Check out this survey and help us moderate our community by becoming a tag moderator here at DEV.