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!
Top comments (4)
Good article! I use react18, ReactDOM has no render method. So , I used the createRoot method to achieve the above effect
do you have a repo? for run at local
You can check out the Stackblitz demo.
nice gg