JSPM – notistack@3.0.0-alpha.12

Package Exports

notistack
notistack/index.js
notistack/notistack.esm.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 (notistack) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Notistack is a notification library which makes it extremely easy to display notifications on your web apps. It is highly customizable and enables you to stack snackbars/toasts on top of one another.
Visit the documentation website for demos.

Stacking behaviour	Dismiss oldest when reached maxSnack (3 here)

How to use
Online demo
Documentation

Getting Started

Use your preferred package manager:

npm install notistack
yarn add notistack

How to use

Instantiate a SnackbarProvider component and start showing snackbars: (see docs for a full list of available props)

import { SnackbarProvider, enqueueSnackbar } from 'notistack';

const App = () => {
    return (
        <div>
            <SnackbarProvider />
            <button onClick={() => enqueueSnackbar('That was easy!')}>Show snackbar</button>
        </div>
    );
};

Alternatively, You can use useSnackbar hook to display Snackbars. Just remember to wrap your app inside of a SnackbarProvider to have access to the hook context:

import { SnackbarProvider, useSnackbar } from 'notistack';

// wrap your app
<SnackbarProvider>
    <App />
    <MyButton />
</SnackbarProvider>;

const MyButton = () => {
    const { enqueueSnackbar, closeSnackbar } = useSnackbar();
    return <Button onClick={() => enqueueSnackbar('I love hooks')}>Show snackbar</Button>;
};

Online demo

Visit the documentation website to see all the examples.
Or play with a minimal working example: codesandbox

Contribution

Open an issue and your problem will be solved.

Author - Contact

Hossein Dehnokhalaji

notistack