react-mui-snackbar

V4.0.0 Released !
React MUI Snackbar is the greatest library to handle notifications in your React app.

It has been built with Material UI and React. Thanks to the library you will increase your productivity, your app will be more user friendly and you will increase your user experience ! Open a notification is now VERY VERY easy and FAST.

With React MUI Snackbar you can display cool notification in your app. You can choose the position and the duration of the notification by using the SnackbarProvider.

Everything has been think to be performant, cool and easy to use. It provides you a simple method which is openSnackbar to open a notification.

Setup

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';
import App from './App';
import {BrowserRouter} from 'react-router-dom';
import SnackbarProvider  from "react-mui-snackbar" ;

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <BrowserRouter>
            <SnackbarProvider
                position={{
                    vertical: 'bottom',
                    horizontal: 'right'
                }}
            >
                <App />
            </SnackbarProvider>
        </BrowserRouter>
    </StrictMode>
);

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Use the Snackbar context to get openSnackbar method. 
import {useSnackbarContext} from "react-mui-snackbar";

function App() {

    const {openSnackbar} = useSnackbarContext() ;

    return (
        <div>
            <button onClick={() => {
                openSnackbar({
                    message:'a cool notification ! ', 
                })
            }}>
                open snackbar
            </button>
        </div>
    )
}

export default App;