Toastr Notification In ReactJS

Introduction

In this article, we’ll create a demo of how we can show Toastr notifications in a ReactJS application.Toastr is a library which is used to create a notification popup.

Create React Project

Create a ReactJS project. To create a new project, open command prompt and add the following command.

npx create-reatc-app reacttoastr

Add React-Toastify library

Now open the newly created project in Visual Studio Code.

Now, go to View >Terminal and install React toastr into this project by using the following npm command.

npm install react-toastify --save

Now install Bootstrap in this project by using the following command,

npm install --save bootstrap

Now, open the index.js file and import Bootstrap .

import 'bootstrap/dist/css/bootstrap.min.css';

Now, go to the src folder and create a new component named 'Toastr.js' and add the following lines in this component.

import React, { Component } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import './App.css';
class Toastr extends Component {
render(){
return (
<div>
<h4 className="navheader" align="center">React-Toastify</h4>
<button className="btn btn-success btnspace" onClick={()=>toast.success('Success Message')}> Success Message</button>
<button className="btn btn-info btnspace" onClick={()=>toast.info('Info Message')}>Info Message</button>
<button className="btn btn-danger btnspace" onClick={()=>toast.error('Error Message')}>Error Message</button>
<button className="btn btn-warning btnspace" onClick={()=>toast.warning('Success Message')}>Warning Message</button>
<ToastContainer />
</div>
);
}
}
export default Toastr

Open the App.css file and add the following CSS code

.navheader{
margin-top: 15px;
font-size: 18px;
color :black !important;
background-color: #b3beca!important
}
.btnspace
{
margin: 15px;
}

Open the App.js file and add the folllowing code.

import React from 'react';
import './App.css';
import Toastr from './Toastr'
function App() {
return (
<div className="App">
<Toastr/>
</div>
);
}
export default App;

Now, run the project by using 'npm start' command and check the result.

Customizing The Toast Notification

Position of Toastr

By default, all the toastr will be positioned on the top right of page, but we can change the position of the Toastr

top-center,
top-right,
top-left,
bottom-center,
bottom-right,
bottom-left

Now go to src folder and create a new component, named 'Customtoastr.js' and the following lines in this component

import React, { Component } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import './App.css';
class CustomToastr extends Component {
render(){
return (
<div>
<h4 className="navheader" align="center">Custom Toastr</h4>
<button className="btn btn-success btnspace" onClick={()=>toast.success("Success Message:Center", { position: toast.POSITION.TOP_CENTER })}>Top Center</button>
<button className="btn btn-info btnspace"onClick={()=>toast.success("Success Message:Left", { position: toast.POSITION.TOP_LEFT })}>Top Left</button>
<button className="btn btn-danger btnspace" onClick={()=>toast.success("Success Message:Bottom Center", {position:toast.POSITION.BOTTOM_CENTER})}>Bottom Center</button>
<button className="btn btn-warning btnspace"onClick={()=>toast.success("Success Message:Bottom Left", { position: toast.POSITION.BOTTOM_LEFT },{closeButton:true})}>Bottom Left</button>
<ToastContainer />
</div>
);
}
}
export default CustomToastr

Now, run the project and check the result.

Close Button

The close button on the Toastr is optional. We can hide this button from Toastr. To use hide close button, use

'closeButton:false'

<button className="btn btn-danger btnspace" onClick={()=>toast.success("Success Message", {closeButton:false})}>Remove </button>

Now, run the project and check the result.

Display Duration

We can set display time after which the Toastr should automatically disappear. To change display time we can use autoClose and set time to this property

"autoClose: 1000"

<button className="btn btn-success btnspace" onClick={()=>toast.success("Success Message", {autoClose: 1000 })}>AutoClose</button>

Transition effect

There is 4 built-in transitions,

Zoom
Bounce
Slide
Flip

Now go to src folder and create a new component, named 'Animationtoastr.js' and add the following lines in this component,

import React, { Component } from 'react';
import { ToastContainer, toast, Zoom } from 'react-toastify';
import { Slide, Flip, Bounce } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import {cssTransition } from 'react-toastify';
import './App.css';
class AnimationToastr extends Component {
render(){
return (
<div>
<h4 className="navheader" align="center">Transition effect</h4>
<button className="btn btn-success btnspace" onClick={()=>toast("Success Message", { type: toast.TYPE.INFO, transition: Flip})}>Flip Effect </button>
<button className="btn btn-success btnspace" onClick={()=>toast("Success Message", { type: toast.TYPE.INFO, transition:Bounce})}>Bounce Effect </button>
<button className="btn btn-success btnspace" onClick={()=>toast("Success Message", { type: toast.TYPE.INFO, transition:Slide})}>Slide Effect </button>
<ToastContainer />
</div>
);
}
}
export default AnimationToastr

Run the project and check the result.

We can also create draggable Toastrs. To make Toastr draggable use the following property "draggable:true"

<button className="btn btn-success btnspace" onClick={()=>toast("Success Message", { draggable: true})}>Draggable </button>

Summary

In this article, we learned about Toastr and how we use Toastr notifications in ReactJs. Toastr provides some unique notification pop-ups which we can use to display a message or alerts within an application.