Building a Global Notification System with React MUI Snackbar and Custom Hooks

As a front-end developer, creating a consistent notification system across your application is a common requirement. Users need feedback when they perform actions - whether successful or not. Material UI's Snackbar component offers an elegant solution for displaying temporary messages, but implementing it properly across a complex React application requires thoughtful architecture.

In this guide, I'll show you how to leverage MUI's Snackbar component to build a global notification system with a custom React hook. By the end, you'll have a reusable notification system that can be triggered from any component in your application without prop drilling or complex state management.

Learning Objectives

After reading this article, you'll be able to:

• Understand MUI Snackbar's core functionality and configuration options
• Build a global notification context to manage application-wide alerts
• Create a custom hook for triggering notifications from any component
• Implement different notification types (success, error, warning, info)
• Customize the appearance and behavior of your notification system
• Avoid common pitfalls when working with Snackbar components

MUI Snackbar Deep Dive

Before we start building our notification system, let's explore the Snackbar component in depth. Understanding its capabilities and limitations will help us design a better system.

What is a Snackbar?

Snackbars provide brief messages about app processes at the bottom of the screen. They're temporary and non-modal, meaning they don't interrupt the user experience. According to Material Design principles, snackbars should be used to provide feedback about an operation without blocking the main UI flow.

In MUI, the Snackbar component implements this pattern with a React component that handles its own positioning, timing, and animation states.

Core Props and Configuration

The Snackbar component comes with numerous props that control its behavior and appearance. Let's examine the most important ones:

Basic Usage Pattern

The simplest implementation of a Snackbar looks like this:

In this basic example, the Snackbar is controlled by the open state. When the button is clicked, open becomes true, and the Snackbar appears. After 6 seconds (6000ms), the handleClose function is called automatically, setting open to false and hiding the Snackbar.

Snackbar vs. Alert

While Snackbar provides the positioning and timing mechanism, it doesn't include built-in styling for different message types (success, error, etc.). For that, MUI provides the Alert component, which can be nested inside a Snackbar:

The Alert component adds visual styling based on the severity prop, which can be "error", "warning", "info", or "success". This combination of Snackbar and Alert will be the foundation of our global notification system.

Customization Options

MUI's Snackbar offers several customization options:

1. Positioning: Use the anchorOrigin prop to place the Snackbar anywhere on the screen.

2. Transitions: Change how the Snackbar appears and disappears.

3. Duration: Control how long the Snackbar stays visible.

4. Actions: Add interactive elements like buttons.

Accessibility Considerations

Snackbars present some accessibility challenges:

1. Duration: Users with cognitive disabilities may need more time to read messages. Consider extending the default duration.

2. Screen readers: Ensure your message text is descriptive and meaningful for screen reader users.

3. Color contrast: When customizing colors, maintain sufficient contrast for readability.

4. Focus management: If your Snackbar contains interactive elements like buttons, ensure they receive focus appropriately.

MUI's implementation already handles many accessibility concerns, like ensuring the Snackbar is announced to screen readers. However, it's your responsibility to provide clear, concise messages and appropriate timing.

Building a Global Notification System

Now that we understand the Snackbar component, let's build a global notification system that can be accessed from anywhere in our application.

The Architecture

Our notification system will consist of:

1. NotificationContext: A React context to manage notification state globally
2. NotificationProvider: A provider component that renders the Snackbar
3. useNotification: A custom hook to trigger notifications from any component

This approach follows the React Context API pattern, which allows components to share values without explicitly passing props through every level of the component tree.

Step 1: Create the Notification Context

First, let's create a context to manage our notification state:

This context provides:

• State for the notification (open, message, severity)
• Functions to show and hide notifications
• A custom hook (useNotificationContext) to access this context

Step 2: Create the Notification Component

Next, let's create a component that renders the Snackbar based on our context state:

This component:

• Uses our context to get the current notification state
• Renders a Snackbar with an Alert inside it
• Handles closing the notification

Step 3: Create the Custom Hook

Now, let's create a custom hook that makes it easy to trigger notifications from any component:

This hook provides convenient methods for different notification types, making it intuitive to use in components.

Step 4: Set Up the Provider in Your App

To make our notification system available throughout the app, we need to wrap our application with the NotificationProvider and include the NotificationSystem component:

Step 5: Use the Notification System in Components

Now we can use our notification system from any component in the application:

Advanced Customization

Let's enhance our notification system with advanced features to make it more powerful and flexible.

Adding Support for Actions

Let's modify our system to support action buttons in notifications:

Then update the NotificationSystem component:

And finally, update the hook:

Now we can use it with actions:

Supporting Multiple Notifications

One limitation of our current system is that it can only show one notification at a time. Let's enhance it to support multiple simultaneous notifications:

Update the notification system to display multiple notifications:

And update the hook:

Custom Notification Themes

Let's add support for custom theming of our notifications:

Integration with API Calls

In real-world applications, notifications are often triggered by API responses. Let's create a utility to easily integrate our notification system with API calls:

Now we can use this utility in our components:

Best Practices and Common Issues

Let's cover some best practices and common issues when working with MUI Snackbars in a global notification system.

Performance Considerations

1. Avoid Re-renders: Our context-based approach minimizes re-renders by isolating notification state from the rest of the application.

2. Cleanup Timeouts: When using timeouts for auto-dismissal, ensure they are properly cleaned up to prevent memory leaks:

3. Limit Active Notifications: Too many notifications can overwhelm the UI. Consider limiting the number of active notifications:

Common Issues and Solutions

1. Snackbar Disappearing Too Quickly

Problem: Users may miss notifications that disappear too quickly.

Solution: Adjust the duration based on message length:

2. Z-Index Conflicts

Problem: Snackbars may appear behind other elements.

Solution: Ensure your Snackbar has a high enough z-index:

3. Mobile Responsiveness

Problem: Snackbars may not be optimally positioned on mobile devices.

Solution: Adjust the positioning based on screen size:

4. Handling Multiple Sequential Notifications

Problem: When multiple notifications are triggered in quick succession, they may stack and become unreadable.

Solution: Queue notifications and show them one after another:

Advanced Example: Notification System with Progress Tracking

For long-running operations, it can be useful to show progress in the notification. Let's implement this feature:

Create a component to display progress notifications:

Create a hook to use progress notifications:

Example usage for a file upload:

Wrapping Up

We've built a comprehensive global notification system using MUI's Snackbar component and React hooks. This system provides a clean, reusable way to display notifications throughout your application without prop drilling or complex state management.

Our notification system offers:

• Different notification types (success, error, warning, info)
• Support for actions like "Undo"
• Multiple simultaneous notifications
• Custom theming options
• Progress tracking for long-running operations
• Integration with API calls

By leveraging React Context and custom hooks, we've created a solution that's both powerful and easy to use. This approach follows best practices for state management in React applications and provides a consistent user experience across your app.

Remember to consider accessibility when implementing notifications, ensuring that all users can perceive and interact with your notification system effectively. With the right configuration, your MUI Snackbar-based notification system will enhance the user experience without being intrusive or disruptive.