2023-06-21
5049
#react
Uzochukwu Eddie Odozi
15407
Jun 21, 2023 ⋅ 18 min read

How to create a custom toast component with React

Uzochukwu Eddie Odozi Web and mobile app developer. TypeScript and JavaScript enthusiast. Lover of Pro Evolution Soccer (PES).

Recent posts:

Vite Adoption Guide Overview Examples And Alternatives

Vite adoption guide: Overview, examples, and alternatives

Vite is a versatile, fast, lightweight build tool with an exceptional DX. Let’s explore when and why you should adopt Vite in your projects.

David Omotayo
Nov 29, 2023 ⋅ 16 min read
Implementing Advanced Features With The Navigator.Share API

Implementing advanced features with the navigator.share API

Explore advanced capabilities for content sharing with the navigator.share API, including dynamic content sharing, custom share targets, and batch sharing.

David Omotayo
Nov 29, 2023 ⋅ 10 min read
Chas Peacock Leader Spotlight

Leader Spotlight: Scaling for the next phase of growth with Chas Peacock

We spoke with Chas to get his insights on building technology and internal processes for companies that are scaling quickly.

Jessica Srinivas
Nov 29, 2023 ⋅ 7 min read
Cypress Adoption Guide: Overview, Examples, Alternatives

Cypress adoption guide: Overview, examples, and alternatives

Cypress is one of today’s foremost tools for testing web applications. Let’s explore when and why you should adopt Cypress in your projects.

Paul Akinyemi
Nov 28, 2023 ⋅ 10 min read
View all posts

9 Replies to "How to create a custom toast component with React"

  1. Hi Eddie, thank you very much for your detailled explanation. I have modified your coding a little bit to suit my needs perfectly but I´m currently struggeling to get it working properly. Here is my coding so far:

    My component is called Notification and is receiving a variable called message via props. This props is an object containing either nothing (empty object) or a few attributes. Based on the attribute “type” the notification is rendered. With my coding I don´t have any notification banner on my page. Can you help me through this?

    import React, {useEffect} from “react”;
    import successIcon from “../../../assets/images/check.svg”;
    import warningIcon from “../../../assets/images/warning.svg”;
    import errorIcon from “../../../assets/images/error.svg”;
    import infoIcon from “../../../assets/images/check.svg”;
    import “./Notification.module.css”

    const Notification = props => {
    let notificationProperties = null;
    const { message } = props;

    if (Object.keys(message).length > 0) {
    const id = Math.floor((Math.random() * 262) + 1);
    switch (props.message.type) {
    case ‘success’:
    notificationProperties = {
    id,
    title: ‘Success’,
    text: props.message.text,
    backgroundColor: ‘#5cb85c’,
    icon: successIcon
    };
    break;
    case ‘error’:
    notificationProperties = {
    id,
    title: ‘Error’,
    text: props.message.text,
    backgroundColor: ‘#d9534f’,
    icon: errorIcon
    };
    break;
    case ‘warning’:
    notificationProperties = {
    id,
    title: ‘Warning’,
    text: props.message.text,
    backgroundColor: ‘#f0ad4e’,
    icon: warningIcon

    };
    break;
    case ‘info’:
    notificationProperties = {
    id,
    title: ‘Info’,
    text: props.message.text,
    backgroundColor: ‘#5bc0de’,
    icon: infoIcon
    };
    break;
    default:
    console.log(‘default clause…’);
    }

    return (

    X

    {notificationProperties.title}

    {notificationProperties.text}

    )
    } else {
    return
    }
    }

    export default Notification;

  2. where are you using the notification component?
    Instead of using if/else, you can use a useState hook.

    Do you have your code on github? If you do, share the link so i can see your complete code.

  3. I can´t share my repo link here in public. It´s almost working properly, I´m still having some css glitch, which I struggle most at the moment. Can I send you my repo link via mail or social media?

  4. Hello.
    You did a great tutorial there and I’m very happy because for several weeks I wanted to make alerts with React. Congratulations.
    I modified the code a little to separate the types of toast and to programmatically create toasts whose message changes depending on the situation.
    Everything seems to work fine but when I want to display the page, I get the following message:
    “Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.”
    I have been trying in vain to solve the problem for several days now, but I am certainly not succeeding because I am new to React that I learn by autodidact.
    I have put all source code on github, here is the link:
    https://github.com/kanmaber/ToastTest.git
    Could you help me ?

  5. Awesome tutorial, thank you! I tweaked that a bit to get it working all over my app with useAppContext() and didn’t have to need to differentiate between list and toastList anymore. Also I put the autoDeletion into a while loop and added [list] as the observed parameter so that it wouldn’t run all the time.

  6. The auto dismiss could use a bit of improvement so that instead of each component being dismissed x seconds after the previous, each is dismissed x seconds after they appear. Otherwise this is a nice toaster 😀

  7. Beautifully done. A nice piece of useful code that can be incorporated in larger projects which almost always need some sort of notifications present. One enhancement can be added, but will requires quite a bit of coding, is the clearing of the toast. It would be nice to see the toast clears the same way it enters, with a bit of animation. Unfortunately, this might require additional libraries such as react-transition-group or other wise add some delay for the css animation to complete before removing the toast from the ToastList. Otherwise excellent tutorial.

Leave a Reply