10 useful react packages for Frontend, #reactjs

10 useful react packages for Frontend, #reactjs

ยท

3 min read

Hi everyone ๐Ÿ‘‹, hope you all are well. In this blog, I will talk about 10 react packages that I have recently explored. These packages can help you to code nice and friendly UI's.

So, let us start. Shall we start?


โ›ณ react-spinners

This package contains a collection of some really nice loading spinners, which you will find really useful.

๐Ÿ”— Useful links

react-spinners


โ›ณ use-state-with-callback

This package helped me when I was stuck with the asynchronous behavior of useState. I had to make an API call, and due to the asynchronous behavior of useState I was not getting the exact object which I had to send to an API. Then with use-state-with-callback, I did that task.
So read about it more from the useful link, ๐Ÿ‘‡

๐Ÿ”— Useful link

use-state-with-callback


โ›ณ country-list

This package contains the names and codes of the countries. So if in your project, you need to do something with country name or code you can explore this package more.

๐Ÿ”— Useful link

country-list


โ›ณ react-country-flag

In your project, If you want to show the country flag then you can use this package. This package has a react component for emoji/svg country flags. So, explore more about it, if you need.

๐Ÿ”— Useful links

react-country-flag


โ›ณ react-datepicker

This package has a really nice date picker UI's. And those Datepicker components are simple and reusable. You can know more about it from useful links, ๐Ÿ‘‡

๐Ÿ”— Useful links

react-datepicker


โ›ณ react-country-region-selector

This package can really become helpful if you have to work with the country, and region connected with that country. This provides a pair of React components to display connected country and region dropdowns (pick a country, it shows the relevant regions).

๐Ÿ”— Useful links

react-country-region-selector


โ›ณ react-languages-select

In your project, if you want to take language input from users then you can use this package. This package contains customizable language select components. Know more about them from useful links, ๐Ÿ‘‡

๐Ÿ”— Useful links

react-languages-select


โ›ณ react-phone-input-2

Sometimes we need to take the phone number of the user as input. So you can use this, react-phone-input-2 is a highly customizable phone input component with auto-formatting, which you can use to take phone numbers.

๐Ÿ”— Useful links

react-phone-input-2


โ›ณ react-typeform

This package is very useful when you are working with form in your project. Many times we want to show only one question at a time and on click of next button next question.
So this package, Renders each component at a time with a next button, and when all components are traversed then all components are shown at once for review with a submit button.

๐Ÿ”— Useful link

react-typeform


โ›ณ react-icons

This package contains a collection of some famous and really useful icons, which you can use in your reactjs project. You can know more about them from useful links, ๐Ÿ‘‡

๐Ÿ”— Useful links

react-icons


๐Ÿ That's all for this

This blog is just to share knowledge, Hope it will help you.

you can connect with me on Twitter. First, I had tweeted about each package (except react-icons) separately, but when I was tweeting about the last package. I thought I should write a blog about them also. So this blog is the result of that.

Thanks for reading, ๐Ÿ™