Package detail

Table of Contents

• How to use
• Online demo
• Documentation

Getting Started

Use your preferred package manager:

npm install notistack
yarn add notistack

Version guide

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

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

`notistack@3.0.1`

March 8, 2023

• @alexander7161 Restore aria-describedby prop on SnackbarContent #547
• @sodenn Fix regression on using React.Node as Snackbar message #548

`notistack@3.0.0`

March 6, 2023

New features

• Notistack can now be used standalone and without requiring @mui/core to be installed as a peerDependency.
• Support for passing custom snackbar component. See custom components for more info.
• Support for overriding styles using styled. See overriding styles for more info.
• Allow displaying or closing Snackbars from outside a React component. See getting started guide for more info.
• Various typescript fix and imporvements
• Exports Transition component to help with creating your own enter/close transitions. See Transitions for more info.
• Upgraded documentation website with docs and examples for both notistack v2.x and v3.x

Breaking changes

• See Migration guide for a full list of breaking changes with instruction on how to upgrade to v3.

`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. `diff <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. `diff <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.