How to Build a Global Notification System in React

#react #typescript #frontend #tutorial

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!’})

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

If you’re using Yarn, then do this:

yarn add @mui/material @emotion/react @emotion/styled

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’;

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

interface NotifyProps {
  type: MessageType,
  message: string
}

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;

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!