How to Build a Global Notification System in React
Tags: react, typescript, frontend, tutorial
Published: 2023-07-30 17:57:51

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](https://mui.com). 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:

```javascript
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](https://www.typescriptlang.org/docs).

<p>&nbsp;</p>

## 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
```
<p>&nbsp;</p>

## 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:

```typescript
//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:

```typescript
interface NotifyProps {
  type: MessageType,
  message: string
}
```
<p>&nbsp;</p>

## Creating the Component
Now all that's left is creating the component itself. It will render the Material UI [Snackbar](https://mui.com/material-ui/react-snackbar/) component. Here's the final result:

```typescript
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!