Top React UI Libraries for Simplifying Frontend Development and How to Implement Them
Tags: javascript, programming, react, webdev
Published: 2023-03-20 00:40:46

Creating a visually appealing and intuitive user interface is key when it comes to developing modern websites. Developing UIs from scratch can be time-consuming and complex, you'll agree with me that React and its add-on libraries make life easier, right?
React UI libraries are pre-built and easily customizable UI components that easily fit your application's design and functionality requirements.
In this article, we will look at some of the top React UI libraries that can help simplify engineering on the front end and enhance your web app's user experience.
These libraries offer a range of components that helps save time and effort while delivering a highly decorous and professional user interface. Let's take a look at the libraries one after the other and how you can implement them in your project:

### 1. React Icons
Icons are an essential part of modern web design, providing users with visual cues and helping to make interfaces more intuitive and user-friendly. React icons provide a set of pre-built icons that can be easily customized and integrated into your project. Some of the popular icons you'll find in react icons include Ant Design icons, Bootstrap icons, Dev icons, Font Awesome 5, Material Design icons, and Game icons. It is not limited to those alone, there are several other icons that you can make use of in your project, but it is a good practice to maintain consistency for each project. Let us see how we can implement React icons in a React project.

#### Step 1: Installation
You need to install react-icons into your react app using the npm command below in your terminal:

```
npm install react-icons --save
```
#### Step 2: Importing the icons
You'll need to first import the specific icon component you want to use from react-icons library. You can't possibly know the name of all icons component off the top of your head, simply go to [https://react-icons.github.io/react-icons/](https://react-icons.github.io/react-icons/) and search for the specific icon you want to use. As a case study, we are going to use the warning icon component from Ant Design (ant design icons are usually the first set of results). On the website, search for 'warning', click on the icon once to copy it. Go to the specific component you want to add the icon to and import it using:
```
import {AiFillWarning} from 'react-icons/ai'
```
Note: the last two letters of the texts in quotes must match the first two letters of the icon component - in this case, it is **ai**...indicating **Ant Design**.
####Step 3: Add the icon as a component
Let's add the icon within a single-word paragraph:

```
<p>Caution <AiFillWarning/> </p>
```
React-icons can be easily imported and used in your project. [Read full documentation](https://github.com/react-icons/react-icons).

###2. Toast notifications using _Toastify_
Toast notifications help with real-time feedback on users' actions, improving the overall user experience. Toastify provides an easily customizable solution for adding toast notifications to your project. The library provides components (functional and class-based) for displaying notifications. There is a wide range of configuration options for Toastify notifications. Let's take a look at how it works and how we can implement it in a react project:
#### Step 1: Installation
To use Toastify in your react project, you will need to add it by running the npm command below:
```
npm install --save react-toastify
```
#### Step 2: Import toastify notification
The two components that must be imported are `**ToastContainer**` and `**toast**`. Use the import statement to integrate these two components:
```
import {ToastContainer, toast} from 'react-toastify'
```
You also need to import the pre-built styles:
```
import 'react-toastify/dist/ReactToastify.css'
```

#### Step 3: Create toast render function
In your functional component, a function is needed to render the component when the user performs an action on the web page:
```
const notify = () => toast('Notification text here');
```
You can also render a component instead of a string...
```
const notify = () => toast(<NewComponent/>);
```
Using the onClick event on a button, let's render the notification by calling the `notify` function...
```
<button onClick={notify}>Notify Me!</button>
<ToastContainer/>
```
When the `Notify Me` button is clicked, the `onClick` event triggers the notify function which in turn renders the toast notification in the UI.
**Note: you must also render the <ToastContainer/> component for the toast notification to work.**
There are configurations options that you can customize to fit into your project requirements; check out the full documentation here: [Toastify Documentation](https://fkhadra.github.io/react-toastify/introduction/)

###3. React Modal
React modal provides an easily customizable and accessible way to display content in a modal dialog. It is a simple and flexible solution that enables developers to create interactive UIs. React modal is highly configurable and can be easily integrated into any React application.
Let's delve into the implementation of modals using React modal:
####Step 1: Installation
To use react modal in your react app, you will need to add it by running the npm command below in your terminal:
```
npm install react-modal
```
####Step 2: Import the modal from React-modal library
After installation, you need to import the **Modal** component from the library into the component you are working on using the import statement:
```
import {Modal} from 'react-modal'
```
####Step 3: Add to component
You need to render the Modal component in your project. The two configurations that must be added as props in the Modal component are `isOpen` and `onRequestClose`.
```
<Modal
isOpen
onRequestClose
>
Modal contents can be written here...
</Modal>
```
The modal need to be interactive well enough for smooth user experience. Using events and states, we can configure the modal to be interactive:
Above the modal component, let's add a button that will trigger a click event that would make the modal pop up.
```
<button onClick={}>Open Modal</button>
```
The button doesn't do anything yet, using the useState hook, we can alter the state of the modal: 
```
const [modalOpen, setModalOpen] = useState(false);
//the initial state of the modal should be set to false to keep it closed by default
```
The click event needs a function that will alter the state of the pop up modal by rendering it to the user interface:
```
<button onClick={() => setModalOpen(true)}>Open Modal</button>
```
Add `modalOpen` as the value of the isOpen prop in the modal component...
```
<Modal
isOpen={modalOpen}
onRequestClose
>
Modal contents can be written here...
</Modal>
```
`isOpen` prop opens and closes the modal.
A close button has to be added to the modal component to enable the user to close the modal.
```
<Modal
isOpen={modalOpen}
onRequestClose
>
<button onClick={() => setModalOpen(false)}>Close Modal</button>

Modal contents can be written here...
</Modal>
```
To optimize the user experience to the max, the user needs to be able to close the modal when the overlay is clicked. The `onRequestClose` prop allows the user to close the modal:

```
<Modal
isOpen={modalOpen}
onRequestClose={() => setModalOpen(false)}
>
<button onClick={() => setModalOpen(false)}>Close Modal</button>

Modal contents can be written here...
</Modal>
```
Make sure to bind modal to your appElement root using:
```
Modal.setAppElement('#root');
```

For styling and additional configuration, refer to full documentation here: [React Modal Documentation](https://github.com/reactjs/react-modal).

###4. Tool Tip (tippy.js)
Tippyjs tool tip is a UI component that provides extra information about an element when users hover over an element. Tool tips are useful in creating interactive websites, providing users with relevant information without crowding the user interface.
Let us see how we can integrate react tool tip in a project.
####Step 1: Installation
To integrate tippyjs, you need to first install the npm package in the project via the terminal...

```
npm i @tippyjs/react
```
####Step 2: Import tippy component
After installation, import `Tippy` in the component you are working on, also import the ToolTip css file...
```
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';
```
####Step 3: Integrating to UI
To use the Tippy component in the UI, you will wrap the component around the element you are trying to pass additional info to. See example below:
```
<Tippy content="Say Hello">
<button>Greet</button>
</Tippy>
```
Tippy library provides a fast, easy and non-complex way to integrate tooltips in react.
[See full documentation](https://github.com/atomiks/tippyjs-react).

###5. AOS (Animate On Scroll) Library
The AOS library, short for Animate on Scroll, is a powerful tool that helps to create captivating animations that trigger as users scroll through their website. In this guide, we'll explore how to use AOS to add dynamic visual effects to your website.
####Step 1: Installation
Install the aos library using npm in the terminal...
```
npm install aos --save
```
####Step 2: Import the library in your App component
It is recommended to import the library to the base component, this helps to avoid importing into different child components you are working - implementing the DRY principle.

```
import AOS from 'aos';
import 'aos/dist/aos.css';
```
####Step 3: Initialize AOS in the App component using the `useEffect` hook. See example below:
```
import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    AOS.init();
  }, []);
  
  return (
    // Your component code
  );
}
```
####Step 4: Add data-aos to any jsx element
There are more than 15 animation effects that can be used on elements. You have to apply the `data-aos` attribute to be able to apply any animation effect.
```
<div data-aos="fade-up">Animate me!</div>
```
Meanwhile, keep in mind that you have already initialized the library in the base component which is the App component, so you do not need to initialize it anywhere else.
[See full AOS documentation](https://github.com/michalsnik/aos). [See all animation effects](https://michalsnik.github.io/aos/).

There are many other useful libraries that aren't discussed in this article, we will take a look at them in the sequel (part 2) of this article. I hope you found this article useful, let me know your thoughts in the comment section.