MUI Snackbar Provider

A simple and reusable way to display snackbars using Material-UI (v5) with React Context and hooks.

Installation

npm install mui-snackbar-provider

Or with yarn:

yarn add mui-snackbar-provider

Usage

Wrap your application (or router) with the SnackbarProvider and include the PositionedSnackbar component once at the root level.

import { SnackbarProvider } from "mui-snackbar-provider";

function App() {
  return (
    <SnackbarProvider>
      <App />
    </SnackbarProvider>
  );
}

Then, inside any component:

import { useSnackbar } from "mui-snackbar-provider";

const MyComponent = () => {
  const { showSnackbar } = useSnackbar();

  const handleClick = () => {
    showSnackbar({
      message: "Saved successfully!",
      type: "success", // can be 'success', 'error', 'info', or 'warning'
    });
  };

  return <button onClick={handleClick}>Show Snackbar</button>;
};

Snackbar Variants

The snackbar uses the component from MUI to support different message severities:

• "success"
• "error"
• "info"
• "warning" These map directly to the severity prop in MUI's .

Motivation

Snackbars are best triggered by user interaction or async events (like API calls). This package makes it easy to:

• Trigger snackbars from anywhere in your component tree
• Display consistent styling using Material-UI's Alert system
• Avoid repetitive boilerplate across projects

Example

const Example = () => {
  const { showSnackbar } = useSnackbar();

  const handleSave = async () => {
    try {
      await saveData();
      showSnackbar({ message: "Data saved!", type: "success" });
    } catch {
      showSnackbar({ message: "Failed to save data.", type: "error" });
    }
  };

  return <button onClick={handleSave}>Save</button>;
};