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:

React Native Layout Management With Yoga 3.0

React Native layout management with Yoga 3.0

Explore layout management in your React Native apps with the latest release of React Native v0.74 and Yoga 3.0.

Andrew Baisden
May 30, 2024 ⋅ 8 min read
A Guide To Javascript Parser Generators

A guide to JavaScript parser generators

Explore three JavaScript parser generator libraries and the benefits of creating custom parsers for specific project needs.

Yashodhan Joshi
May 30, 2024 ⋅ 16 min read
Using Rust And Axum To Build A Jwt Authentication Api

Using Rust and Axum to build a JWT authentication API

Learn to build a basic JWT authentication system with Rust and Axum, including setting up the routes, handlers, and the middleware system.

Eze Sunday
May 29, 2024 ⋅ 9 min read
Building A Customizable Dashboard With Dashy

Building a customizable dashboard with Dashy

Dashy helps us create beautiful, customizable, modern dashboard pages with web service links and widgets.

Shalitha Suranga
May 29, 2024 ⋅ 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