JSPM – notistack

Package Exports

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

Readme

Notistack: Display notifications with call of a function.

Easy to use, customizable, smooth transitions, stack and queue them up!

Documentation · Examples

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

Version guide

Version	Notes
`v3.x.x`	Latest stable release. Standalone (i.e. not dependent on material-ui)
<= `v2.0.8`	Requires Material-UI v5 as peer dependency. `npm install notistack@2.0.8`
<= `1.0.10`	Requires Material-UI <= v4 as peer dependency. `npm install notistack@latest-mui-v4`

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_cnd