How You Can Implement Notifications with Material UI in Your App

In web development, the ability to efficiently notify users about various events or actions within your application is crucial. Material UI, a popular React component library inspired by Google's Material Design, provides a sleek, efficient way to implement these notifications.

This blog delves deep into how you can leverage Material UI's capabilities, specifically focusing on the Snackbar component, to create engaging and informative notifications.

Material UI (MUI) is a library of React components that allows you to build your app with Material Design principles. Among its vast collection of components, the Snackbar component displays brief messages at the bottom of the screen. These messages, or notifications, are essential for interacting with your users, providing feedback, or alerting them to app events.

Getting Started with Snackbar

The Snackbar component is your go-to for implementing notifications in a Material UI app. To get started, ensure you've installed Material UI in your project. If not, you can do so by running:

1npm install @mui/material @emotion/react @emotion/styled
2

Next, import the Snackbar component into your React component:

1import { Snackbar } from '@mui/material';
2

Displaying Simple Messages

To display a notification, you need to manage the open state of the Snackbar. This involves creating a state that controls whether the Snackbar is visible. Here's a simple example:

1import React, { useState } from 'react';
2import { Button, Snackbar } from '@mui/material';
3
4function SimpleSnackbar() {
5  const [open, setOpen] = useState(false);
6
7  const handleClick = () => {
8    setOpen(true);
9  };
10
11  const handleClose = (event, reason) => {
12    if (reason === 'clickaway') {
13      return;
14    }
15    setOpen(false);
16  };
17
18  return (
19    <div>
20      <Button onClick={handleClick}>Open simple snackbar</Button>
21      <Snackbar
22        open={open}
23        autoHideDuration={6000}
24        onClose={handleClose}
25        message="Note archived"
26      />
27    </div>
28  );
29}
30

Enhancing Notifications with the Alert Component

For more complex notifications, consider including severity levels, such as success, error, or warning. This is where the Alert component within MUI comes into play. First, import the Alert component:

1import { Alert } from '@mui/material';
2

Next, wrap the Alert component inside the Snackbar:

1<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
2  <Alert onClose={handleClose} severity="success">
3    This is a success message!
4  </Alert>
5</Snackbar>
6

Positioning Your Snackbar

Material UI allows you to specify the position of the Snackbar on the page. You can control its vertical and horizontal alignment using the anchorOrigin prop:

1<Snackbar
2  anchorOrigin={{ vertical: "top", horizontal: "right" }}
3  open={open}
4  autoHideDuration={6000}
5  onClose={handleClose}
6>
7  <Alert onClose={handleClose} severity="success">
8    This is a success message!
9  </Alert>
10</Snackbar>
11

Customizing Snackbar with Props and Classes

Customizing the appearance and behavior of a Snackbar in your React application using Material UI can significantly enhance the user experience. By utilizing the various props and classes available to the Snackbar component, you can tailor its functionality and style to fit your app's design requirements better. Here's an example demonstrating how to customize a Snackbar using props such as autoHideDuration, onClose, and the className prop for styling.

First, ensure you have the necessary Material UI imports:

1import React, { useState } from 'react';
2import { Snackbar, Button } from '@mui/material';
3import { makeStyles } from '@mui/styles';
4

Next, define some custom styles using makeStyles. This will give you the ability to apply unique styles to the Snackbar:

1const useStyles = makeStyles(theme => ({
2  customSnackbar: {
3    '& .MuiSnackbarContent-root': {
4      backgroundColor: 'teal', // Custom background color
5      color: 'white', // Custom text color
6      fontSize: '1rem', // Custom font size
7    }
8  }
9}));
10

Now, you can create a functional component with a Button to display the Snackbar and the Snackbar itself. This example includes customizations for the duration the Snackbar is displayed (autoHideDuration), how it's closed (onClose), and applies the custom styles defined earlier:

1function CustomizedSnackbar() {
2  const classes = useStyles();
3  const [open, setOpen] = useState(false);
4
5  const handleClick = () => {
6    setOpen(true);
7  };
8
9  const handleClose = (event, reason) => {
10    if (reason === 'clickaway') {
11      return;
12    }
13    setOpen(false);
14  };
15
16  return (
17    <div>
18      <Button onClick={handleClick}>Show Custom Snackbar</Button>
19      <Snackbar
20        open={open}
21        autoHideDuration={5000} // Snackbar will disappear after 5 seconds
22        onClose={handleClose}
23        className={classes.customSnackbar} // Apply custom styles
24        message="This is a customized notification"
25      />
26    </div>
27  );
28}
29

In this example, the makeStyles hook defines a set of custom styles applied to the Snackbar component via the className prop. The & .MuiSnackbarContent-root selector targets the root element of the Snackbar content, allowing you to customize its appearance directly. By adjusting the backgroundColor, color, and fontSize properties, you can modify the Snackbar's look to match your app's theme or branding.

Conclusion

Implementing notifications in your app using Material UI's Snackbar component is a straightforward yet powerful way to enhance user interaction. By following the examples and guidelines provided, you can create a variety of notifications that fit the needs of your app and its users. The library is vast, and its alignment with Material Design ensures that your app remains at the forefront of UI/UX trends.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.