Package Exports

mui-easy-snack
mui-easy-snack/dist/mui-easy-snack.es.js
mui-easy-snack/dist/mui-easy-snack.umd.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-easy-snack) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

mui-easy-snack

A simple context-based Snackbar provider for React applications using MUI (Material-UI) Snackbars. This package allows you to easily display snackbars (notifications) from any component in your application.

Installation

npm install mui-easy-snack

Usage

Step 1: Wrap your application with SnackProvider

import React from 'react';
import { SnackProvider } from 'mui-easy-snack';
import { ThemeProvider, theme } from '@mui/material'; // Adjust the import based on your theme setup
import YourApp from './YourApp';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <SnackProvider>
        <YourApp />
      </SnackProvider>
    </ThemeProvider>
  );
}

export default App;

Step 2: Use the Snackbar context in your components

import React from 'react';
import { Button } from '@mui/material';
import { useSnack } from 'mui-easy-snack';

function ExampleComponent() {
  const snack = useSnack();

  return (
    <Button onClick={() => snack.show('This is a Snackbar!')} variant="contained">
      Show Snackbar
    </Button>
  );
}

export default ExampleComponent;

Step 3: Customize Snackbar options (Optional)

snack.show('Success message!', {
  variant: 'success',
  autoHideDuration: 3000,
  action: (
    <Button size="small" color="inherit" onClick={() => /* some action */}>
      UNDO
    </Button>
  ),
});

License

This project is licensed under the MIT License - see the LICENSE file for details.