Package Exports

notistack

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

Big hero banner here (Material-ui logo and Notistack logo)

Highly customisable notification snackbars that can be stacked on top of each other description saying this is an extention to Material-ui Snackbar and of course you can customise it the same way you can customise MUISnackbar.

some HQ nice gifs

Getting Started

Use your prefered package manager:

npm install notistack
yarn add notistack

Usage

Wrap your app inside a SnackbarProvider component: (see docs for a full list of available props)

import { SnackbarProvider } from 'notistack';

<SnackbarProvider maxSnack={3}>
    <App />
</SnackbarProvider>

Export any component that needs to send notification using withSnackbar. By doing this, you'll have access to the method onPresentSnackbar in your props which can be used to send notifications.

import { withSnackbar } from 'notistack';

class MyComponent extends Component {
  
  handleNetworkRequest = () => {
     const { onPresentSnackbar } = this.props; 
     fetchSomeData()
        .then(() => onPresentSnackbar('success', 'Successfully fetched the data.'))
        .catch(() => onPresentSnackbar('error', 'Failed fetching data.'));
  };

  render(){
     //...
  };
  
};

export default withSnackbar(MyCompnent);

Demo

You can see the online demo at: _______. To play with the demo locally, do the following:

git clone https://github.com/iamhosseindhv/notistack
cd notistack

npm install
cd demo && npm install
npm start

Docs

Notes

-- link to google material design that says don't stack snackbars (we don't care)

Future

Allow snackbar type customization
Some snackbars should get dismissed after timeout and some other should only get dissmissed when user clicks on dismiss/close button.

Contribution

Open an issue and your problem will be solved.

Author - Contact

Hossein Dehnokhalaji

License

MIT

MIT badge at the top of the repo