https://github.com/iamhosseindhv/notistack

Highly customizable notification snackbars (toasts) that can be stacked on top of each other
https://github.com/iamhosseindhv/notistack

google-material javascript material-design material-ui notifications reactjs redux snackbar stack toast toast-notifications

Last synced: 5 days ago
JSON representation

Highly customizable notification snackbars (toasts) that can be stacked on top of each other

• Host: GitHub
• URL: https://github.com/iamhosseindhv/notistack
• Owner: iamhosseindhv
• License: other
• Created: 2018-08-04T21:05:47.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-08-06T20:45:23.000Z (5 months ago)
• Last Synced: 2024-12-30T17:24:27.644Z (12 days ago)
• Topics: google-material, javascript, material-design, material-ui, notifications, reactjs, redux, snackbar, stack, toast, toast-notifications
• Language: TypeScript
• Homepage: https://notistack.com
• Size: 5.57 MB
• Stars: 3,954
• Watchers: 23
• Forks: 298
• Open Issues: 60
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

• stars - iamhosseindhv/notistack
• awesome-react - notistack - Highly customizable notification snackbars (toasts) that can be stacked on top of each other.  (UI Components / Notification)
• best-of-react - GitHub - 10% open · ⏱️ 23.10.2023): (Notifications)
• awesome-material-ui - Notistack - Easy snackbars for Material-UI (so you don't have to deal with open/close state of them). (Components)

README

        


  




**[Notistack](https://notistack.com): Display notifications with call of a function.**





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





Documentation

 · 

Examples


[![npm version](https://img.shields.io/npm/v/notistack.svg?label=version)](https://www.npmjs.com/package/notistack)

[![npm downloads](https://img.shields.io/npm/dm/notistack.svg)](https://www.npmjs.com/package/notistack)

[![package license](https://img.shields.io/npm/l/notistack.svg)](https://www.npmjs.com/package/notistack)



Table of Contents

--

- [How to use](#how-to-use)

- [Online demo](#online-demo)

- [Documentation](https://notistack.com/api-reference)

## 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](https://github.com/mui/material-ui)) |

| <= `v2.0.8` | Requires Material-UI v5 as peer dependency. `npm install [email protected]` |

| <= `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](https://notistack.com/api-reference) for a full list of available props)

```jsx

import { SnackbarProvider, enqueueSnackbar } from 'notistack';

const App = () => {

  return (

    


      

       enqueueSnackbar('That was easy!')}>Show snackbar

    

  );

};

```


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:

```jsx

import { SnackbarProvider, useSnackbar } from 'notistack';

// wrap your app

  

  

const MyButton = () => {

  const { enqueueSnackbar, closeSnackbar } = useSnackbar();

  return  enqueueSnackbar('I love hooks')}>Show snackbar;

};

```

### Online demo

**Visit the [`documentation website`](https://notistack.com/features/basic) to see all the examples.**

Or play with a minimal working example: [codesandbox](https://codesandbox.io/s/github/iamhosseindhv/notistack/tree/master/examples/simple-example??hidenavigation=1&module=%2FApp.js) 

### Contribution

Open an issue and your problem will be solved.

### Author - Contact

Hossein Dehnokhalaji