Package Exports

mui-snackbar-provider
mui-snackbar-provider/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mui-snackbar-provider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

MUI Snackbar Provider

npm NPM Downloads

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>;
};