Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

ReactJS Toast Notification

  • Difficulty Level : Easy
  • Last Updated : 26 Oct, 2021

Toast Notifications are popup messages that are added so as to display a message to a user. It can be a success message, warning message, or custom message. Toast Notification is also called Toastify Notifications. This all toast notification comes under-react-toastify module so to use them we need to import this module.
Prerequisites:
 

Below all the steps are described order-wise to add toast-notification and their configuration. 
 

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • Step 1: Before moving further, firstly we have to install the react-toastify module, by running the following command in your project directory, with the help of the terminal in your src folder or you can also run this command in Visual Studio Code’s terminal in your project folder. 
npm add react-toastify
  • Step 2: After installing the react-toastify module, now open your app.js file which is present inside your project directory, under the src folder, and delete code preset inside it.
  • Step 3: Now import react-toastify module, toastify CSS file, and a caller method of toast notification.
  • Step 4: In your app.js file, add this code to import the toastify-modules by adding the below code in your app.js 
     
import {toast} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
toast.configure()

Example 1: By default position of notification is top right. 
 

  • app.js: 
     

javascript






import React from 'react';
 
// Importing toastify module
import {toast} from 'react-toastify';
 
// Import toastify css file
import 'react-toastify/dist/ReactToastify.css';
 
 // toast-configuration method,
 // it is compulsory method.
toast.configure()
 
// This is main function
function GeeksforGeeks(){
    // function which is called when
    // button is clicked
    const notify = ()=>{
 
        // Calling toast method by passing string
        toast('Hello Geeks')
    }
    return (
        <div className="GeeksforGeeks">
            <button onClick={notify}>Click Me!</button>
            </div>
    );
}
  
export default GeeksforGeeks;
  • Output: 
     

Example 2: There is a total six-position where we can show our notification. These are bottom left, bottom center, bottom right, top left, top right, and top center. To change the position we need to pass, one more argument in the toasting method along with string. See below how to configure the position of notifications.
 

  • app.js: 
     

javascript




import React from 'react';
import {toast} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
  
toast.configure()
function GeeksforGeeks(){
    const notify = ()=>{
        toast('Hello Geeks 4',
           {position: toast.POSITION.BOTTOM_LEFT})
        toast('Hello Geeks 6',
           {position: toast.POSITION.BOTTOM_RIGHT})
        toast('Hello Geeks 5',
           {position: toast.POSITION.BOTTOM_CENTER})
        toast('Hello Geeks 1',
           {position: toast.POSITION.TOP_LEFT})
        toast('Hello Geeks 3',
           {position: toast.POSITION.TOP_RIGHT})
        toast('Hello Geeks 2',
           {position: toast.POSITION.TOP_CENTER})
    }
    return (
        <div className="GeeksforGeeks">
            <button onClick={notify}>Click Me!</button>
            </div>
    );
}
 export default GeeksforGeeks;
  •  
  • Output: 
     

Example 3: Upto now we have used default notification but there are four more built-in type notifications. These are a success, warning, info, and error. See below how to use them.
 

  • app.js: 
     

javascript




import React from 'react';
import {toast} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
   
toast.configure()
function GeeksforGeeks(){
    const notify = ()=>{
        // inbuilt-notification
        toast.warning('Danger')
        // inbuilt-notification
        toast.success('successful')
        // inbuilt-notification
        toast.info('GeeksForGeeks')
        // inbuilt-notification
        toast.error('Runtime error')
        // default notification
        toast('Hello Geeks')
          
    }
    return (
        <div className="GeeksforGeeks">
            <button onClick={notify}>Click Me!</button>
            </div>
    );
}
 export default GeeksforGeeks;
  •  
  • Output: 
     

Example 4: By default, notifications are shown for 5second only. To configure time, we use autoClose method, and if we set the autoclose method to false, then the user has to close that notification otherwise it will remain there only. See below how to use it.
 

  • app.js: 
     

javascript




import React from 'react';
import {toast} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
   
toast.configure()
function GeeksforGeeks(){
    const notify = ()=>{
        // Set to 10sec
        toast.warning('Danger', {autoClose:10000})
        // Set to 3sec
        toast.success('successful', {autoClose:3000})
        // User have to close it
        toast.info('GeeksForGeeks', {autoClose:false})
        toast.error('Runtime error', {
         // Set to 15sec
         position: toast.POSITION.BOTTOM_LEFT, autoClose:15000})
        toast('Hello Geeks')// Default
          
    }
    return (
        <div className="GeeksforGeeks">
            <button onClick={notify}>Click Me!</button>
            </div>
    );
}
 export default GeeksforGeeks;
  •  
  • Output: 
     

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :