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.
  1. 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. 
  1. npm install react-toastify --save  
Now install Bootstrap in this project by using the following command,
  1. npm install --save bootstrap     
Now, open the index.js file and import Bootstrap .
  1. 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.
  1. import React, { Component } from 'react';    
  2. import { ToastContainer, toast } from 'react-toastify';    
  3. import 'react-toastify/dist/ReactToastify.css';    
  4. import './App.css';    
  5. class Toastr extends Component {    
  6.   render(){    
  7.     return (    
  8.       <div>    
  9.         <h4 className="navheader" align="center">React-Toastify</h4>      
  10.         <button  className="btn btn-success btnspace" onClick={()=>toast.success('Success Message')}> Success Message</button>    
  11.         <button   className="btn btn-info btnspace" onClick={()=>toast.info('Info Message')}>Info Message</button>    
  12.         <button  className="btn btn-danger btnspace" onClick={()=>toast.error('Error Message')}>Error Message</button>    
  13.         <button  className="btn btn-warning btnspace" onClick={()=>toast.warning('Success Message')}>Warning Message</button>    
  14.         <ToastContainer />    
  15.       </div>    
  16.     );    
  17.   }    
  18. }    
  19. export default Toastr   
Open the App.css file and add the following CSS code
  1. .navheader{        
  2.   margin-top: 15px;     
  3.   font-size: 18px;       
  4.   color :black !important;        
  5.   background-color: #b3beca!important        
  6. }     
  7. .btnspace    
  8. {    
  9. margin: 15px;    
  10. }    
Open the App.js file and add the folllowing code.
  1. import React from 'react';    
  2. import './App.css';    
  3. import Toastr from './Toastr'    
  4. function App() {    
  5.   return (    
  6.     <div className="App">    
  7.    <Toastr/>    
  8.     </div>    
  9.   );    
  10. }    
  11. 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
  1. import React, { Component } from 'react';    
  2. import { ToastContainer, toast } from 'react-toastify';    
  3. import 'react-toastify/dist/ReactToastify.css';    
  4. import './App.css';    
  5. class CustomToastr extends Component {    
  6.   render(){    
  7.     return (    
  8.       <div>    
  9.         <h4 className="navheader" align="center">Custom Toastr</h4>      
  10.         <button  className="btn btn-success btnspace" onClick={()=>toast.success("Success Message:Center", { position: toast.POSITION.TOP_CENTER })}>Top Center</button>    
  11.         <button   className="btn btn-info btnspace"onClick={()=>toast.success("Success Message:Left", { position: toast.POSITION.TOP_LEFT })}>Top Left</button>    
  12.         <button  className="btn btn-danger btnspace" onClick={()=>toast.success("Success Message:Bottom Center", {position:toast.POSITION.BOTTOM_CENTER})}>Bottom Center</button>    
  13.         <button  className="btn btn-warning btnspace"onClick={()=>toast.success("Success Message:Bottom Left", { position: toast.POSITION.BOTTOM_LEFT },{closeButton:true})}>Bottom Left</button>    
  14.     
  15.         <ToastContainer />    
  16.       </div>    
  17.     );    
  18.   }    
  19. }    
  20.     
  21. 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'
  1. <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"
  1. <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,
  1. import React, { Component } from 'react';  
  2. import { ToastContainer, toast, Zoom } from 'react-toastify';  
  3. import { Slide, Flip, Bounce } from 'react-toastify';  
  4. import 'react-toastify/dist/ReactToastify.css';  
  5. import {cssTransition } from 'react-toastify';  
  6. import './App.css';  
  7.   
  8. class AnimationToastr extends Component {  
  9.       
  10.   render(){  
  11.     return (  
  12.       <div>  
  13.        <h4 className="navheader" align="center">Transition effect</h4>    
  14.         <button  className="btn btn-success btnspace" onClick={()=>toast("Success Message", { type: toast.TYPE.INFO,  transition: Flip})}>Flip Effect </button>  
  15.         <button  className="btn btn-success btnspace" onClick={()=>toast("Success Message", { type: toast.TYPE.INFO,  transition:Bounce})}>Bounce Effect </button>  
  16.         <button  className="btn btn-success btnspace" onClick={()=>toast("Success Message", { type: toast.TYPE.INFO,  transition:Slide})}>Slide Effect </button>  
  17.         <ToastContainer />  
  18.       </div>  
  19.     );  
  20.   }  
  21. }  
  22.   
  23. 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"
  1. <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. 
Author
Sanwar Ranwa
4 67.5k 11.9m

©2024 C# Corner.