Building a Custom Toaster Component with React and Material-UI

Introduction:

In web applications, it is common to use toaster components for displaying messages or notifications to users. This blog post will demonstrate how to create a customized toaster component using React and Material-UI. The useToaster hook from the rsuite library will be utilized to handle the toaster's functionality. We will delve into the code to comprehend how it operates.

src
The code provided comprises a custom hook named useToasterHook, which encapsulates the logic for pushing notifications to the toaster using the useToaster hook from the rsuite library. It returns a function that can be used to push various types of notifications to the toaster, called pushNotification.

The pushNotification function takes two parameters: type and message. The type parameter specifies the notification type (success, error, info, or warning), while the message parameter represents the notification content.

src
The pushNotification function creates a JSX element that represents the notification toast. It uses Material-UI's Box, IconButton, and Typography components for styling and structure. Depending on the type parameter, different CSS classes and icons are applied to the toast to distinguish between notification types.

Furthermore, the pushNotification function adds an event handler to the close button of each toast, which clears the toaster when clicked. Additionally, a setTimeout function is utilized to automatically clear the toaster after 3000 milliseconds (3 seconds).

Usage:

To use this custom toaster component, follow these steps:

Import the useToasterHook function into your React component.
Call the useToasterHook function to get the pushNotification function.
Invoke the pushNotification function with the desired type and message parameters to push a notification to the toaster.
Here's an example of how you can use the custom toaster component:

import React from 'react';
import { useToaster } from 'rsuite';
import '../styles/toasterMessage.css'
import { Box, IconButton, Typography } from "@mui/material"
import CloseIcon from '@mui/icons-material/Close';
const useToasterHook = () => {
    const toaster = useToaster()
    const pushNotification = (type, message) => {
        toaster.push(<Box className="wrapper">
            {type === "success" && <Box className="toast success">
                <Box className="container-1">
                    <i className="fas fa-check-circle"></i>
                </Box>
                <Box className="container-2">
                    <Typography>Success</Typography>
                    <Typography>{message}</Typography>
                </Box>
                <IconButton onClick={() => {
                    toaster.clear()

                }}> <CloseIcon></CloseIcon></IconButton>
            </Box>}
            {type === "error" && <Box className="toast error">
                <Box className="container-1">
                    <i className="fas fa-times-circle"></i>
                </Box>
                <Box className="container-2">
                    <Typography>Error</Typography>
                    <Typography>{message}</Typography>
                </Box>
                <IconButton onClick={() => toaster.clear()}> <CloseIcon></CloseIcon></IconButton>
            </Box>}
            {type === "info" && <Box className="toast info">
                <Box className="container-1">
                    <i className="fas fa-info-circle"></i>
                </Box>
                <Box className="container-2">
                    <Typography>Info</Typography>
                    <Typography>{message}</Typography>
                </Box>
                <IconButton onClick={() => toaster.clear()}> <CloseIcon></CloseIcon></IconButton>
            </Box>}
            {type === "warning" && <Box className="toast warning">
                <Box className="container-1">
                    <i className="fas fa-exclamation-circle"></i>
                </Box>
                <Box className="container-2">
                    <Typography>Warning</Typography>
                    <Typography>{message}</Typography>
                </Box>
                <IconButton onClick={() => toaster.clear()}> <CloseIcon></CloseIcon></IconButton>
            </Box>}
        </Box>, { placement: 'topCenter' })
        setTimeout(() => { toaster.clear() }, 3000)
    }
    return pushNotification;
};

export default useToasterHook

src

Conclusion:

In this blog post, we learned how to create a custom toaster component using React and Material-UI. By encapsulating the toaster logic in a custom hook, we can easily reuse the functionality across different components in our application. Feel free to modify and enhance the code according to your specific requirements and design preferences.

Remember to import the necessary dependencies, such as React, Material-UI components, and the rsuite library, before using this code in your project.