ReactJS Toast Notification

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 a custom message. Toast Notification is also called as 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.

  • Step 1: Before moving further, firstly we have to install react-toastify module, by running following command in your project directory, with the help of 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 react-toastify module, now open your app.js file which is preset inside your project directory’s, under src folder and delete code preset inside it.
  • Step 3: Now import react-tostify 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 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



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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;

    chevron_right

    
    

  • Output:

Example 2: There are 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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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;

    chevron_right

    
    

  • Output:

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

  • app.js:

    javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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;

    chevron_right

    
    

  • 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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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;

    chevron_right

    
    

  • Output:

react-js-img




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

2


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.