Package detail

notistack-v2-maintained

frattaro1.4kMIT2.2.0

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

notistack, enqueueSnackbar, snackbarprovider, useSnackbar

readme

notistack logo

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 documentation website for demos. npm version npm downloads package license
Stacking behaviour Dismiss oldest when reached maxSnack (3 here)

Table of Contents

Getting Started

Use your preferred package manager:

npm install notistack
yarn add notistack

If you're using Material-UI version 4.x.x or lower, download a compatible version of notistack using:

npm install notistack@latest-mui-v4
yarn add notistack@latest-mui-v4

How to use

1: Wrap your app inside a SnackbarProvider component: (see docs for a full list of available props)
Note: If you're using material-ui ThemeProvider, make sure SnackbarProvider is a child of it.

import { SnackbarProvider } from "notistack";

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

2: Export any component that needs to send notification using withSnackbar. By doing this, you'll have access to methods enqueueSnackbar and closeSnackbar, where the former can be used to send snackbars.

import { withSnackbar } from "notistack";

class MyComponent extends Component {
  handleNetworkRequest = () => {
    fetchSomeData()
      .then(() => this.props.enqueueSnackbar("Successfully fetched the data."))
      .catch(() => this.props.enqueueSnackbar("Failed fetching data."));
  };

  render() {
    //...
  }
}

export default withSnackbar(MyComponent);

2 (alternative): You can use useSnackbar hook in your functional components as well.

import { useSnackbar } from "notistack";

const MyButton = () => {
  const { enqueueSnackbar, closeSnackbar } = useSnackbar();

  const handleClick = () => {
    enqueueSnackbar("I love hooks");
  };

  return <Button onClick={handleClick}>Show snackbar</Button>;
};

Online demo

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

Redux and Mobx support:

notistack is compatible with state management libraries such as Redux and Mobx.

Contribution

Open an issue and your problem will be solved.

Author - Contact

Hossein Dehnokhalaji

Hossein Dehnokhalaji Instagram profile Hossein Dehnokhalaji Linkedin profile Hossein Dehnokhalaji email address

changelog

Thanks to all contributers who improved notistack by opening an issue/PR.

notistack@2.0.8

Oct 15, 2022
  • @jordansexton Fix TypeScript bad import path #485


notistack@2.0.7

Oct 15, 2022
  • Fix TypeScript cannot be used as a JSX constructor #485


notistack@2.0.6

Oct 15, 2022
  • @ryancrunchi @vwalsh Fix TypeScript cannot be used as a JSX constructor #485


notistack@2.0.5

May 12, 2022
  • @neporshiso Update TransitionComponent type for MUIv5 compatibility #474


notistack@2.0.4

Apr 10, 2022
  • @suren-atoyan Add support for React 18 #482


notistack@2.0.3

Oct 31, 2021
  • @h0tw4t3r Ensure variant classes are passed to SnackbarContent #451


notistack@2.0.2

Sep 26, 2021
  • @hugofpsilva @ramosbugs @joemaffei Publish material-ui v5 compatible version as latest instead of next #437


notistack@1.0.10

July 25, 2021
  • @joshkel Support Collapse with root and container class keys #408


notistack@1.0.9

May 19, 2021
  • @SimonAmphora Remove the need to use !important to customise variant styles #215 (comment)


notistack@1.0.8

May 18, 2021
  • @angeshpc91 Fixes issues with centered snackbars on xs screen sizes #380


notistack@1.0.7

May 8, 2021
  • @whytspace Multiple Snackbars always left aligned #373


notistack@1.0.6

April 18, 2021
  • @rzmz Snackbars should have equal width on XS screens #367


notistack@1.0.5

February 28, 2021
  • Prevent snackbars from having the same width #356


notistack@1.0.4

February 23, 2021
  • @tarazena: Export missing SnackbarContent for TypeScript #354


notistack@1.0.3

December 23, 2020
  • @gregorysl @lephleg @joaogardenberg Add support for React 17 #339


notistack@1.0.2

November 26, 2020
  • Add support for MUI v5 #333


notistack@1.0.1

October 6, 2020
  • @thierrysantos: EnqueueSnackbar supports snackbar with key zero #318
  • Fix various typescript inconsistencies #319


notistack@1.0.0

August 22, 2020
  • Drop SnackbarContent component and ContentProps props #297

Breaking Changes

  • className prop is now used to customise styles applied to the content of snackbar (e.g. backgroundColor).
  • If you were using className to apply styles to Snackbar component, you should now do so using classes.root.
<SnackbarProvider
-  className={classes.snackbar}
+  classes={{
+    root: classes.snackbar
+  }}
>
  • ContentProps prop is not supported anymore. Here are alternative ways to pass the same data to snackbar component. For any other scenario, you should pass you own custom content.
<SnackbarProvider
-  ContentProps={{
-    action: () => <button>dismiss</button>,
-    'aria-describedby': 'some-value',
-  }}
+  action={() => <button>dismiss</button>}
+  ariaAttributes={{
+    'aria-describedby': 'some-value'
+  }}
>
  • If you have customised MuiSnackbarContent through Material-UI theme object, these changes won't automatically reflect within notistack. You can however, use className prop to apply your customisations.
const theme = createMuiTheme({
  overrides: {
    // no effect within notistack
    MuiSnackbarContent: {
      root: {
        fontSize: "1rem"
      }
    }
  }
});


notistack@0.9.17

June 10, 2020
  • Bug fix and improvments #277
  • Alternative for Object.entries to better support IE 11 compat #284


notistack@0.9.16

May 17, 2020
  • @lukawsk: Allow autoHideDuration be null #273


notistack@0.9.15

May 17, 2020
  • @nebojsanb: Fix bug with displaying snackbars #270
  • @nebojsanb: Improve bundle size by removing react-is dependency #272


notistack@0.9.14

May 15, 2020
  • Reduce bundle size. Many thanks to @merceyz #268 #209 #163


notistack@0.9.13

May 12, 2020
  • Exclude tsconfig.json in the build #266


notistack@0.9.12

May 12, 2020
  • @iinitz: Enforce white text for dark theme #241
  • @fbarbare: Let Mat UI handle the font and border-radius #262
  • @tomohiro-iwana @JuanmaMenendez: Fix bug with snackbar not being centered on xs screens #232
  • Add new containerRoot class to SnackbarContainer #263
  • Use filled icons as default icon variant #265


notistack@0.9.11

April 20, 2020
  • @mehmetkose @andrewmclagan @oliviertassinari @merceyz: Reduce Bundle size by using clsx instead of classnames, Use babel-plugin-optimize-clsx #163
  • @kikoanis Fix bug with custom variant classes #251
  • Drop support for Material UI v3


notistack@0.9.10

April 17, 2020
  • Migrate codebase to typescript.


notistack@0.9.9

March 6, 2020
  • DASPRiD Directly return snackbar context in useSnackbar #223
  • dalborgo Add support to set default variant on SnackbarProvider #180
  • dalborgo Deprecate support for children in enqueueSnackbar options.


notistack@0.9.8

Feb 23, 2020
  • @svish: Correct enqueueSnackbar typing #217
  • @dgczhh: Make sure onClose callback that's been passed through options parameter of enqueueSnackbar gets called when snackbar is closed using closeSnackbar function #220
  • @JoseLion: Add snackbar key to transition handler parameters. Fix transition handler callback types #214


notistack@0.9.7

Dec 1, 2019
  • @PeterMK85: Add support for React portals #179
  • @ly-vo: Pass message (as well as key) in content prop callback #198
  • @simonbos: Allow safe override of TransitionProps #194


notistack@0.9.6

Nov 12, 2019
  • @JimmyMultani: Allow snackbar key 0 to be passed #187
  • @williammetcalf: Allow preventDuplicate prop to be overridden by individual snackbar #188
  • @simonbos: Fix setState race condition #189
  • @kriim: preventDuplicate by comparing keys (if specified) #190


notistack@0.9.5

Oct 16, 2019
  • @mehmetkose @oliviertassinari: Improve bundle size #163
  • @Grabauskas: Make sure published package is free of trash #185


notistack@0.9.4

Oct 10, 2019
  • @Brettm12345: Add support to close snackbar on click away #182
  • @Brettm12345: Add support to globally customize the default snackbar #180


notistack@0.9.3

Oct 6, 2019
  • @FredyC: Prevent snackbar processing on SnackbarProvider unmount #173
  • @nick-cromwell: Allow customising snackbar container styles #172


notistack@0.9.2

Sep 24, 2019

@ryan-gray: Remove deprecated materila-ui spacing unit #169


notistack@0.9.1

Sep 23, 2019

@vyushin: Add support for resizable snackbars #164


notistack@0.9.0

Sep 4, 2019

@ProtectedVoid: Improves accessibility of snackbars #153


notistack@0.8.9

Jul 23, 2019

@YIZHUANG: Allow overriding some of iconVariants #136


notistack@0.8.8

Jun 29, 2019

@dgreuel: Bug fix - add prop-types to dependencies #139


notistack@0.8.7

Jun 25, 2019

@jhrinoa: Update prop-types versions in package.json #134


notistack@0.8.6

Jun 6, 2019

@eps1lon: Update peer dependency requirement for material-ui #119


notistack@0.8.5

May 22, 2019

@bcorbold: Add types path to package.json for better IDE support #124


notistack@0.8.4

May 18, 2019
  • Fix minor bug with typescript definitions #abd04cf


notistack@0.8.3

May 15, 2019

@alexisab: Add support to close all snackbars at once #122


notistack@0.8.2

Apr 27, 2019

@jgodi: Allow snackbar children to be of type function #114


notistack@0.8.0

Apr 26, 2019

@YBogomolov

  • Add support for multiple action buttons #107


notistack@0.7.0

Apr 19, 2019

@jhrinoa @ds009 @lukejagodzinski

  • Add support for ref using React.forwardRef#84
  • Add hoist-non-react-statics #111
  • Capitalise - Rename withSnackbarProps interface to WithSnackbarProps. #109

notistack@0.6.1

Apr 1, 2019

Thanks to all contributers who improved notistack by opening an issue/PR.

@Methuselah96 @VincentLanglet

  • Remove duplicate ClassNameMap from index.d.ts #104

notistack@0.6.0

Mar 30, 2019

Thanks to all contributers who improved notistack by opening an issue/PR.

@ecwyne @Lukas-Kullmann

  • Completely deprecate and delete onPresentSnackbar method.
  • Add support for hooks useSnackbar #83
  • Add displayName to components exported by withSnackbar HOC #100

notistack@0.5.1

Mar 15, 2019

Thanks to all contributers who improved notistack by opening an issue/PR.

@amakhrov

  • Fix typing for iconVariant props #91

notistack@0.5.0

Mar 5, 2019

Thanks to all contributers who improved notistack by opening an issue/PR.

@cwbuecheler @mpash @khhan1993 @Fs00 @martinmckenna

  • Rename InjectedSnackbarProps to withSnackbarProps in type definitions #59
  • Add new prop dense to allow dense margins for snackbars (suitable for mobiles) #58
  • Improve performance and prevent unnecessary child re-rendering #39

notistack@0.4.3

Feb 24, 2019

Thanks to all contributers who improved notistack by opening an issue/PR.

@mckernanin @butchmarshall @VincentLanglet @oliviertassinari

  • Move classnames and prop-types to dependencies #72
  • Add option to preventDuplicate snackbars from getting into the queue. #67
  • Add option to persist a notification until dismissed #42
  • Add persist option and call onClose callback with reason: maxsnack when a snackbar is dismissed due to reaching maxSnack #62

notistack@0.4.2

Feb 5, 2019

Thanks to all contributers who improved notistack by opening an issue/PR.

@zsh1313 @james-cordeiro @xiromoreira

  • Return event and reason in onClose callback #46
  • Add support to close snackbars programmatically #20

notistack@0.4.1

Dec 10, 2018

Thanks to all contributers who improved notistack by opening an issue/PR.

@james-cordeiro @steinbergh @sethduncan @martinmckenna

  • Allow snackbar messages of type node to be passed in enqueueSnackbar #34
  • Allow snackbars with different heights to be stacked without overlapping on others #35
  • Improve typings #37

notistack@0.4.0

Nov 29, 2018
  • Fix issue where we couldn't add custom variant icon of type string (like emojies).

notistack@0.3.9

Nov 20, 2018

Thanks to all contributers who improved notistack by opening an issue/PR.

@nowaalex @nocksapp @nijk @ysgk

  • Add support for onExited and onClose props. #21
  • Add support to pass children via enqueueSnackbar. #23
  • Support for enqueueing multiple snackbars at once. #14
  • Fix bug "Uncaught Error". #26

notistack@0.3.8

Nov 19, 2018

Thanks to all contributers who improved notistack by opening an issue/PR.

@BornaP @pantharshit00

  • Fix bug where user couldn't apply css classes to mui-Snackbar classes.root. #11
  • Smaller default icon variants so they don't make snackbars larger in height.
  • Remove material-ui Typography v2 warnings. #19

notistack@0.3.7

Oct 22, 2018

  • More customisation:

    • New prop hideIconVariant to hide iconVariant.
    • Set variant of a snackbar to default, (which is the default value) and you'll have a naked snackbar ready to be customised.
    • Using classes property, specify the styles applied to snackbars when variant is set to success, error, warning or info,

  • Support for actions:

    • Add action to all of the snackbars, or an individual snackbar.

  • New feature:

    • Customise snackbars individually, by options parameter of enqueueSnackbar method.