DEV Community

Olabisi Olaoye
Olabisi Olaoye

Posted on • Updated on

How to Build a Global Notification System in React

Notifications are an integral part of a well structured React web application, especially when the user expects some form of feedback from completing a task or making a request. There are many ways of achieving this, but this article will be centered on building a simple notification component with Material UI. Material UI is a component library for React applications that makes frontend development easier, and it's a good option if you don’t want to build design components from scratch.

The goal of this guide is to be able to call a function to display the notification like this:

showNotification({type: success, message: Hey there!})
Enter fullscreen mode Exit fullscreen mode

This tutorial will be adopting TypeScript, so this component is suited for TypeScript projects. You can learn more about TypeScript here.

 

Installing the dependencies

First, install Material UI in your React application. If you're installing with npm, do this on your command line:

npm install @mui/material @emotion/react @emotion/styled
Enter fullscreen mode Exit fullscreen mode

If you’re using Yarn, then do this:

yarn add @mui/material @emotion/react @emotion/styled
Enter fullscreen mode Exit fullscreen mode

 

Creating Types and Interfaces

Create a file in the src folder of your project. We can call it notificationDemo.tsx. And with the function call of the notification component, we know that we want to pass in an object as an argument. This object should contain the type of the notification (e.g success, error, info) and the message to be displayed. A more effective way to define the notification types would be to store each one in a type like this:

//add as many message types as you want
type MessageType = success | error | warning | info;
Enter fullscreen mode Exit fullscreen mode

Then create an interface, NotifyProps to specify how that object will look:

interface NotifyProps {
  type: MessageType,
  message: string
}
Enter fullscreen mode Exit fullscreen mode

 

Creating the Component

Now all that's left is creating the component itself. It will render the Material UI Snackbar component. Here's the final result:

const showNotification = ({ type, message }: NotifyProps) => {
    const container = document.createElement('div');
    document.body.appendChild(container);

    ReactDOM.render(
      (
    <Snackbar 
          anchorOrigin={{ vertical: 'top', horizontal:'right' }}
          open={true} 
          sx={{position: 'fixed', zIndex: 1500}}
    >
      <Alert severity={type} sx={{ width: '100%' }}>
          {message}
      </Alert>
    </Snackbar>


),
      container
    );

    setTimeout(() => {
      document.body.removeChild(container);
    }, 5000);
  };

  export default showNotification;
Enter fullscreen mode Exit fullscreen mode

Note that the ReactDOM.render function renders the component onto the page. The setTimeout function determines how long it stays on the page before it disappears.

That’s it! You can call the showNotification function anywhere in your application and it will render on the page.

Please leave me a comment or reaction to let me know if this post helped. Thank you for reading!

Top comments (4)

Collapse
 
boyanmeng profile image
boyan

Good article! I use react18, ReactDOM has no render method. So , I used the createRoot method to achieve the above effect

Collapse
 
qleoz12 profile image
qleoz12

do you have a repo? for run at local

Collapse
 
olabisi09 profile image
Olabisi Olaoye

You can check out the Stackblitz demo.

Collapse
 
abdonsila profile image
Abdellah

nice gg