Five Time Saving React Packages You MUST Try!
Tags: react, webdev, productivity, tooling
Published: 2022-12-19 09:00:00

*Quick Plug before we get started: If you like what you read, feel free to read more over at [my blog site](https://the-net-blog.netlify.app/), or read this article in [my blog site](https://the-net-blog.netlify.app/post/five-time-saving-react-packages-you-must-try)*

React is a powerful tool, but sometimes you might find yourself spending way too much
time creating simple elements, that really shouldn't take that long. Today I'll be showing you five
React packages [(plus bonus)](#bonus-react-spinners-easy-loading-indicator-component) that save you tons!


## Table Of Contents
1. [react-icons - Library for the most famous icons](react-icons-library-for-the-most-famous-icons)
2. [react-color - Color picker comopnent](react-color-color-picker-comopnent)
3. [react-tostify - React notifications made easy!](#react-tostify-react-notifications-made-easy)
4. [react-datepicker - Simple package for a date picker component!](react-datepicker-simple-package-for-a-date-picker-component)
5. [react-modal - Add modals to your website easily](react-modal-add-modals-to-your-website-easily)
6. [(BONUS) react-spinners - Easy loading indicator component](#bonus-react-spinner-easy-loading-indicator-component)
7. [Conclusion](#conclusion)

## react-icons - Library for the most famous icons
Let's start with the one that you probably already heard of or even used if you've been using React
in your projects for a while. If you haven't already, this is a MUST try. The package we
will be using is react-icons, it includes thousands of icons from the most famous providers
including FontAwesome, Feather Icons, and Material Design.

Installation:

```bash
# Using NPM
$ npm install react-icons --save
# Using yarn
$ yarn add react-icons
```

[Their documentation includes examples and well... documentation](https://react-icons.github.io/react-icons/)

## react-color - Color picker comopnent 
This simple react package includes multiple easy-to-use color picker components for your website.
You will deffenetly find one that you will like as there are multiple options to choose from, or
they even make it easy to create your own!

![react-color - color picker component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mxvblgv7znpcuo1fakw.png)

Installation:

```bash
# Using NPM
$ npm install react-color --save
# Using yarn
$ yarn add react-color
```

[Live Demo](http://casesandberg.github.io/react-color/)

[Documentation](http://casesandberg.github.io/react-color/)

## react-toastify - React notifications made easy!
I'm sure you've come across toast notifications at some point. But have you ever thought about
adding them to your website? Well, react-toastify makes that extremely easy and gives you a handful
of props for customization too. But my favorite thing about this package so far is its interactive
playground.

![react-toastify - React notifications made easy!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xah493t8qmxgq2msqdql.png)

Installation:

```bash
# Using NPM
$ npm install react-toastify --save
# Using yarn
$ yarn add react-toastify
```

[Live demo/playground](https://fkhadra.github.io/react-toastify/introduction)

[Documentation](https://fkhadra.github.io/react-toastify/introduction)


## react-datepicker - Simple package for a date picker component!
A date picker is something you will have to use at some point in your React journey. This
simple, lightweight package makes it easy to do just that!

![react-datepicker - Simple package for a date picker component!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbkjgbaju01i203b688f.png)

Installation:

```bash
# Using NPM
$ npm install react-datepicker --save
# Using yarn
$ yarn add react-datepicker
```

[Live demo](https://reactdatepicker.com/)

[Documentation](https://reactdatepicker.com/#example-default)

## (BONUS) react-spinners - Easy loading indicator component
I just had to include this one. I'm sure you've wondered at some point how some websites add these
cool-looking loading indicators to their website. They're not a _must-have_ but deffenetly add 
something that spices up your website just a little more.

![react-spinners - Easy loading indicator component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ooz0x0m5o5516x29x38.png)

Installation:

```bash
# Using NPM
$ npm install react-spinners --save
# Using yarn
$ yarn add react-spinners
```

[Live Demo](https://www.davidhu.io/react-spinners/)

[Documentation](https://github.com/davidhu2000/react-spinners)

## Conclusion
As you probably noticed, these are all simple components, but you'd be surprised to figure out
how much time you can waste adding these to your website.

I appreciate you spending your time reading this post, and if you'd like to read more here you go:

[🏠  Home Page](https://the-net-blog.netlify.app/)

### Last Post
[🔥 Five USEFUL Array Methods you MIGHT not know!](https://the-net-blog.netlify.app/post/five-useful-array-methods-you-might-not-know/)

### Related Posts
[⭐️ STOP! Use this instead of create-react-app](https://the-net-blog.netlify.app/post/stop-use-this-instead-of-create-react-app/)