iamhosseindhv / notistack

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

Notistack: Display notifications with call of a function.

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

Documentation · Examples

Table of Contents

• 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 [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 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's Issues

Add ability to programmatically change snackbar distance from borders

Hi, I want to suggest a feature that would be extremely useful when you have a FAB and you want to avoid displaying snackbars over it.
It would consist of a function provided by withSnackbar() HOC that gives the ability to set the distance in px of the snackbars stack from the top/bottom border (an example of usage could be this.props.setVerticalDistanceFromBorder(8)), and maybe another one that resets this setting (e.g. this.props.resetVerticalDistanceFromBorder()).
I think that the developer should be given the ability to change it at any time because some views may have FABs and other may not. And if other snackbars are displayed while a new distance is set through this function, they should move up/down accordingly.
If some help is needed for the implementation of this feature, count me in. I need it for a school project, but I'm sure that it will be useful to other people too.

Material UI v3.2.0 warnings

If you run this on material UI 3.2.0 which introduced the new typography v2 you get a certain error.

Sandbox: https://codesandbox.io/s/vm8rj9lkqy

But even after I enable nextStyling in the theme I get nesting warning because the package is then trying to render a <div> inside a <p> tag.

Warning after enabling the new typography

Upgrading to v3.2 should fix this, or we may explicitly make that p tag heading or div, not much work if you want I may make a PR

how to compose on functional components (without export default)

I have components which exports multi functions , i tried many ways to compose this on them but non worked , if anyone can help will appreciate that.
here is sample of my code (there are x3 like this one)

export const login = creds => {
  return async () => {
    const firebase = getFirebase();
    try {
      await firebase.auth().signInWithEmailAndPassword(creds.email, creds.password);
    } 
catch (error) {
      console.log(error);
      });
    }
  };
};

how can make enqueueSnackbar works here ?

Material-ui Typography deprecation warnings

Expected Behavior

No errors should show up.

Current Behavior

Material UI error about using deprecated typography variant is shown.

Tech	Version
Notistack	0.3.7
React	16.5.1
Material UI	3.2.2
Browser	Chrome

Suggestions - React Hook

Hi there, will you be updating the use of withSnackbar to react hook anytime soon? =)

const { useSnackbar } from 'notistack'

const [ enquerySnackbar ] = useSnackbar();

Typescript compile errors

export default withSnackbar(Chat)

throws this error when compiled:
Type error: Argument of type 'typeof Chat' is not assignable to parameter of type 'ComponentType<InjectedNotistackProps>'.

Tech	Version
Notistack	v0.4.2
React	v16.7.0-alpha.2
@material-ui/core	v3.7.1
typescript	v3.2.2

Upgrade to new material-ui version

Hi, just a question, do you plan to upgrade this library to new version of material-ui? Using this with material-ui 3.x causes nasty warning due to new naming of typography variants.

Snackbar location

It would be nice if we could tell the provider where on the screen we want the snackbar to be placed (top right corner for instance).

Error: enabling checkmark for use-emoji under Custom icon variant

Enabling the checkmark for "Use Emoji" under custom icon variant throws an error after clicking on one of the snackbars.

https://iamhosseindhv.com/notistack#custom-icon-variant

Expected Behavior

Expected to show a snackbar with custom emoji's for specific variant

Current Behavior

Throws an error for on enabling the checkbox before or after clicking the snackbar

Steps to Reproduce

Provide a link to a live example (you can use codesandbox.io) and an unambiguous set of steps to reproduce this bug.
Include code to reproduce, if relevant (which it most likely is).

This codesandbox.io template _may_ be a good starting point:
https://codesandbox.io/embed/github/iamhosseindhv/notistack/tree/master/demo

If YOU DO NOT take time to provide a codesandbox.io reproduction, should the COMMUNITY take time to help you?

-->
Link:
https://iamhosseindhv.com/notistack#custom-icon-variant

Your Environment

Tested this issue inside MacOS along with Ubuntu OS environment

Error in docs: failed to execute createElement, the tag name provided is invalid

When exploring the demo, if I have a snack showing with Use Emojis checked, the page crashes with the following:

main-96a58da2c9b74a445f7b.js:1 DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('✅') is not a valid name.
    at HTMLDocument.createElement (<anonymous>:1:1554)
    at Wr (https://iamhosseindhv.com/_next/static/commons/main-96a58da2c9b74a445f7b.js:1:172386)
    at Di (https://iamhosseindhv.com/_next/static/commons/main-96a58da2c9b74a445f7b.js:1:202597)
    at da (https://iamhosseindhv.com/_next/static/commons/main-96a58da2c9b74a445f7b.js:1:207899)
    at ha (https://iamhosseindhv.com/_next/static/commons/main-96a58da2c9b74a445f7b.js:1:208771)
    at va (https://iamhosseindhv.com/_next/static/commons/main-96a58da2c9b74a445f7b.js:1:209037)
    at Ya (https://iamhosseindhv.com/_next/static/commons/main-96a58da2c9b74a445f7b.js:1:212585)
    at $a (https://iamhosseindhv.com/_next/static/commons/main-96a58da2c9b74a445f7b.js:1:212097)
    at Ga (https://iamhosseindhv.com/_next/static/commons/main-96a58da2c9b74a445f7b.js:1:211923)
    at ru (https://iamhosseindhv.com/_next/static/commons/main-96a58da2c9b74a445f7b.js:1:217522)

I'm running Chrome 70.0.3538.102.

Standard "this library looks awesome +1" P.S: this library looks awesome!

Dismiss snackbars programmatically

Currently, the only way around closing a currently opened snackbar (with autoHideTimeout set to 999999999) is to call the function again setting the timeout to 0 but this creates a "flash" of the snackbar before immediately disappearing because what the function actually does is on every call it adds to the snackbar queue before removing it immediately. With "open: true" paced before passed in "...options" then at least we can pass in "open: false" which will create a new snackbar to the "queue" still (which is not ideal) but at least this way we can avoid the "flash". This is only useful in situations where you set the max snacks to 1 - for example to create permanent bar notification such as "You are currently offline" for PWA apps which then disappears when the user is back online by enqueing a new snackbar. This is not the ideal solution but changing the order props allows for this slightly better UX to avoid the flash.

The ideal solution however, would be that the "handleEnqueueSnackbar" function returns the queue id so that subsequent calls that pass in the queue ID can target that same snackbar in the queue and force life cycle changes of the underlying snackbar instead such as "open: false" (which can then remove it from the queue to - perhaps another option). For example the signature could be "handleEnqueueSnackbar(message, options. id = null){...}", ID is last so that it is still backwards compatible or make it a part of the options.

Note: the ID cannot be sequential (i.e. array position) so once the snackbar messages reaches 4 then the next message gets the ID 2 (array being 0 based) and of course the ID's for the previous snacks will change so ideally, if the enqueu method is called passing in an ID (perhaps a timestamp id) that no longer exists then simply null is returned and action ignored.

multiple snackbars at once

First, thanks for this project 😍

I want show multiple flash messages on page load, but I can't do that. (Maybe because notistack uses new Date().getTime() for its component's key prop?)

// This code shows only the last flash message.
componentDidMount() {
  const { enqueueSnackbar, flashes } = this.props
  flashes.forEach(flash => {
    enqueueSnackbar(flash.message)
  })
}

I found a workaround for this, but I think this is a little hacky.

componentDidMount() {
  const { enqueueSnackbar, flashes } = this.props
  setTimeout(() => {
    flashes.forEach(flash => {
     enqueueSnackbar(flash.message)
    })
  })
}

Do you have any plan to support such a case?

Custom variants - help required

Thank you for this wonderful library.

I am trying to implement custom variants as follows:
https://iamhosseindhv.com/notistack#custom-variants

I have tried in this sandbox, with no success:
https://codesandbox.io/s/l7p579l5nm

If you have a working sandbox of this example, that would be very helpful.

Thank you for your time.

use closeSnackbar in SnackbarProvider

Is it possible to add the closeSnackbar function to the action of the Snackbar Provider so i don't have to do it for every individual instance?

For Example, I just tried the following,

return (
  <SnackbarProvider 
    autoHideDuration = {null}                                                                                                                            
    maxSnack = {3} 
    action = {[
      <IconButton key="close" color="inherit" onClick = {this.props.closeSnackbar(this)}><CloseIcon/></IconButton>
  ]}
  >
    <Login />
  </SnackbarProvider>
);

and i got an error saying that this.props.closeSnackbar is not a function.

withSnackbar not properly injecting props

Hey guys I'm trying to use snackbar with redux but when running any class with HOC withSnackbar, there are nothing coming from HOC props injection.

-- Even the example in the codesandbox, if you inspect the props, shouldn't be working. magic

Expected Behavior

Current Behavior

Steps to Reproduce

Link:

Context

Your Environment

Tech	Version
Notistack	v1.?.?
React
Browser
etc.

ContentProps not passed to material-ui component

I'm trying to style the snackbar, but passing something like this:
ContentProps: { classes: { root: classes.snackbarContent } }
inside the enqueueSnackbar method doesn't work.

Thank you for your help

how to compose on functional components (without export default)

I have components which exports multi functions , i tried many ways to compose this on them but non worked , if anyone can help will appreciate that.
here is sample of my code (there are x3 like this one)

export const login = creds => { return async () => { const firebase = getFirebase(); try { await firebase .auth() .signInWithEmailAndPassword(creds.email, creds.password); /* props.enqueueSnackbar('Login success', { variant: 'success', }); */ COMMENT } catch (error) { /* props.enqueueSnackbar('Login failed', { variant: 'error', }); */ COMMENT console.log(error); throw new SubmissionError({ _error: 'Login failed', }); } }; };

how can make enqueueSnackbar works here ?

Children can't be passed in EnqueueSnackbar options

Expected Behavior

The documentation here suggests that it should be possible to use any of the ReactMui Snackbar props. So I would expect this:

messages.forEach(({ message }) => this.props.enqueueSnackbar(message, { children: 'Foo' }));

To result in each message containing the text 'Foo'.

Current Behavior

I see the message instead of 'Foo'

Steps to Reproduce

Link:

Context

Your Environment

Tech	Version
Notistack	v0.3.7
React
Browser
etc.

Breaks in production but runs perfect in development

I'm using Next.js combined with Material UI.

For someone reason, notistack runs perfectly on my local development but the css is completely messed up in production. I don't see any errors anywhere.

Release major version

In Semantic Versioning a 0.x.x version is a beta. I think this library is quite complete and should be release as a stable version 1.0.0. It can be now or after a few more PR.

This will give more confidence in its use.

Unable to provide CSS class on < Snackbar > directly

Is there a way to override CSS on element directly?

Customizing variant styles through theme file

Is there any way I can customize variant styles through Material UI's theme file.

You know something like this..

SnackbarItem: {
  variantError: {
    backgroundColor: 'red'
  },
  variantWarning: {
    backgroundColor: 'orange'
  }   
},

Have a good day :)

dismiss button

Thanks for the amazing feature.

One thing, I would like to dimiss the snack bar like in material-ui, action props

action={[

UNDO
,


,
]}

Can I accomplish this?

0.3.8 Uncaught error

0.3.8 throws error: react-dom.development.js:55 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
after enqueueSnackbar call

Getting error objects are not valid as a React child

Bug using Redux example with Material UI

ReactDOM.render(
     <Provider store={store}>
          <SnackbarProvider 
               anchorOrigin={{
                    vertical: 'top',
                    horizontal: 'right',
              }}
          >		
               <HashRouter>
                    <Switch>
                         <Route path="/login" component={LoginPage} />
                         <PrivateRoute path="/" component={Dashboard} />
                    </Switch>
               </HashRouter>
         </SnackbarProvider>
     </Provider>,
     document.getElementById("root")
);

Objects are not valid as a React child (found: object with keys {adapter, transformRequest, transformResponse, timeout, xsrfCookieName, xsrfHeaderName, maxContentLength, validateStatus, headers, method, url, data}). If you meant to render a collection of children, use an array instead.
in span (created by SnackbarItem)
in div (created by SnackbarContent)
in div (created by Typography)
in Typography (created by WithStyles(Typography))
in WithStyles(Typography) (created by Paper)
in Paper (created by WithStyles(Paper))
in WithStyles(Paper) (created by SnackbarContent)
in SnackbarContent (created by WithStyles(SnackbarContent))
in WithStyles(SnackbarContent) (created by SnackbarItem)
in Transition (created by Slide)
in EventListener (created by Slide)
in Slide (created by WithTheme(Slide))
in WithTheme(Slide) (created by TransitionComponent)
in TransitionComponent (created by Snackbar)
in div (created by Snackbar)
in EventListener (created by ClickAwayListener)
in ClickAwayListener (created by Snackbar)
in Snackbar (created by WithStyles(Snackbar))
in WithStyles(Snackbar) (created by SnackbarItem)
in RootRef (created by SnackbarItem)
in SnackbarItem (created by WithStyles(SnackbarItem))
in WithStyles(SnackbarItem) (created by SnackbarProvider)
in SnackbarProvider (at index.js:28)
in Provider (at index.js:27)

Application is working fine when I don't use Notifier component

Tech	Version
Notistack	0.4.2
React	16.4.2
Browser	Chrome
material-ui/core	1.5.1

How to obtain the current number of snack?

I would like to make a Scroll to Top Button that always above all the snack-bars. Therefore, I need a way to know how many snackbar are currently stacked.

Expected Behavior

Should able to get snack from the consumer.

Current Behavior

unable to get snack from the consumer.

New snackbar every render

The plugin is generating a new snackbar evry render that the component does, is it possible to detect if the the new is the same of the still active and just ignore, or is there a way to execute the onPresentSnackbar function from a function (from redux-saga, in my case)?

Handler for removing snackbars programmatically

Right now I can't see a way to remove snackbar manually from parent component. It would be really useful sometimes, like when user did something which triggers error, but he has corrected it, so it would be nice to remove previous error snackbar.

React Unique key prop warning

I'm getting this warning with notistack where it complains about the key prop missing
Warning: Each child in an array or iterator should have a unique "key" prop.
I tried to add it in options with
this.props.enqueueSnackbar('Done', { variant: 'success', key: 'random-string', }
but the key from options is not used

Return (event, reason) in onClose callback

onClose callback only return (key) at the moment, but it will be very useful if the original (event, reason) are also returned.
The benefits being that passing the (event, reason) in the custom onClose callback is like below

1. knows the exact reason about the closing.
2. The material-ui only has two reasons at the moment, but it could have more reasons in the future
3. With event parameter, we can identify where the notification is from, therefore knows which case is this closing about. Say I have a single global (centra) notification component (say named NOTIFIER) with notistack, any component (say 30 components) in the application may fire a notification through NOTIFIER with their own action. And I may have another global component to post-process when user clicks the notification action. With the event parameter, we can identify the case (or another word which origin component) where this notification was fired.

some discussion has gone through this in Allow "onClose" and "onExited" callbacks. The changes to the code as mentioned by @iamhosseindhv looks good

if (reason === 'clickaway') return;
if (singleOnClose) singleOnClose(event, reason, key);
onClose(event, reason, key);

(and event will get passed to onExited callback as well)

Directly import SnackBarItem

Hello,

I am not sure if I am opening this issue simply because I don't understand how imports work with npm packages.

I would like to reuse the SnackBarItem internally used by notistack, so I have uniformity across a "static" SnackBarContent displayed within a Material UI Dialog, and the other notistack SnackBar notifications in my app.

Is this already possible? Or does SnackBarItem need to be added to the top-level index.js in src for this to work?

Changelog

It would be great if there would be a CHANGELOG to see whats new :)

Love this extension <3

Release 0.3.8 date

When you will publish the new release (0.3.8)?

Error: withSnackbar is not a function - only on server

On client everything works fine.

Tech	Version
Notistack	v0.4.1
React	v16.6.3

enqueueSnackbar multiple times ignores maxSnack

Expected Behavior

I'm using CustomEvents to determine when to show the snackbar. On the home page I have some temp methods to test using this library.

The provider in App.tsx: <SnackbarProvider maxSnack={3} anchorOrigin={snackbarOrigin}>...

I have a HoC using withSnackbar(Component) with the following event handler:

private handleDidHappen = (event: CustomEvent<IGlobalAlertEvent>) => {
	const detail: IGlobalAlertEvent = event.detail;
	const message: string = `${detail.title} ${detail.message}`;
	const options: OptionsObject = {
		variant: detail.variant,
		autoHideDuration: detail.autoHideMs
	};

	this.props.enqueueSnackbar(message, options);
}

On the home page I have 5 buttons that fire off events that get picked up by that HoC (Test All, Test Info, Test Warning, Test Error, Test Success). The single event buttons work as I would expect when I randomly click them several times. I expected clicking the "Test All" button would show 3, then show the 4th when the first one auto-hides.

Current Behavior

If I click the "All Alerts" button, which instantly fires 4 events, I'm seeing all 4 snackbar items show at the same time, then all disappear at the same time.

Steps to Reproduce

Set the provider max to 3, then make a click event that runs enqueueSnackbar 4+ times in a row with no pause in between.

BTW this template no longer exists?

• This codesandbox.io template may be a good starting point:
• https://codesandbox.io/embed/github/iamhosseindhv/notistack/tree/master/demo

This should be pretty easy to reproduce, but I can create a codesandbox if needed.

Context

The reason I'm testing this scenario: I was using a custom mobx store to do what this library does, but wanted to try this out. Since this is used when API calls error (among other things), there are times where you might have several events fire in rapid succession.

Your Environment

Project is based on create-react-app using TypeScript. Running on Windows 10, vscode. Everything is current version.

| Tech | Version |

"dependencies": {
	"@material-ui/core": "^3.6.1",
	"@material-ui/icons": "^3.0.1",
	"axios": "^0.18.0",
	"date-fns": "^1.29.0",
	"mobx": "^5.6.0",
	"mobx-react": "^5.4.2",
	"mobx-react-router": "^4.0.5",
	"notistack": "^0.4.0",
	"oidc-client": "^1.5.4",
	"query-string": "^6.2.0",
	"ramda": "^0.26.1",
	"react": "^16.6.3",
	"react-dom": "^16.6.3",
	"react-json-view": "^1.19.1",
	"react-router-dom": "^4.3.1",
	"react-scripts-ts": "3.1.0",
	"validator": "^10.9.0",
	"typescript": "^3.2.1"
},

When using "rtl", the icon needs margin left

Hi, thank you for this great library,

I am trying to use it in a project which has right-to-left direction, the result is that the icon is very close to the text.
Is it possible to change the margin of the icon when it is "rtl" ?

Thank you very much

Typescript support

Hello,
I saw that type definitions file was added, but a new version of notistack is not released yet, so the package cannot be used in Typescript environments yet.

TypeScript support

It would be great to have d.ts files for this notistack. Did not find them in default @types repo, does have them already done by any chance?

I am on tight deadline right now so I just silenced all type warnings...

Allow for multiline snackbar messages

Currently SnackBar notifications are expected to be a very specific height causing SnackBars with multiline messages to stack on top of each other, I would like for variable heights to be accounted for or would like to have access to the TransitionProps and level prop of the SnackBarItem to customize this.

Add option to persist a notification until dismissed

I would like to be able to have a notification persist, until manually dismissed by the user. I'm happy to work on this and create a PR, wanted to open an issue first to make sure this is a feature you'd be open to adding.

Make snackbar offset from view customisable

Issue to fix problems of this nature: #57 #48

[Question] Example on how to position the toast relative to a parent container

I'm wondering how exactly one would go about positioning the toast relative to a container div, rather than entire body.

In our project, we've tried creating our own refs and even changing where in the DOM tree the Provider component was initialized but nothing seems to work

Support for displaying snackbar outside of component

Expected Behavior

Current Behavior

Steps to Reproduce

Link:

Context

Your Environment

Tech	Version
Notistack	v1.?.?
React
Browser
etc.

Add option to prevent duplicate

toastr has a prevent duplicate option.

I think adding one on the SnackbarProvider should be useful

New line in messege

Hi,
is that possible to add a new line mark in the notistack messege text?
I tried '\n' and '
' in many variants but its always printed as writed. 😢

Unmet peer dependency "prop-type" "classnames"

Expected Behavior

yarn gives no warning

Current Behavior

yarn gives two unmet peer dependency warning

Steps to Reproduce

yarn add notistack

Context

I have a typescript project. I have no reason to add prop-types in mine.
I think prop-types and classnames should be dependencies and not peerDependencies.

Your Environment

Tech	Version
Notistack	v0.4.2

Redux compatibility

Hi, is there a method which can be used from the reducer to display messages.

Is there a way to customize font-size and line-height?

Hi @iamhosseindhv!

Great job! I use notistack quite often but I have a question. How can I customize font-size and line-height properties on SnackbarItem component? It seems like they are hardcoded:
https://github.com/iamhosseindhv/notistack/blob/master/src/SnackbarItem/SnackbarItem.styles.js#L10

Thanks in advance!

Export context to be used in the new contextType

Yesterday React 16.6 was released and introduced the new static contextType in the class
https://reactjs.org/blog/2018/10/23/react-v-16-6.html#static-contexttype

So can you please export the SnackBarNext context so that we may consume this component using this new API, we only need to export it 😄 . You may also export the SnackbarContext

I can make a PR if you say

withSnackbar HOC re-rendering child unnecessarily

Expected Behavior

in withSnackbar.js, there should be some sort of shallow props checking so that it ensures that it is not unnecessarily re-rendering it's child component. I suppose the shallow prop check would just check whether it already has access to the notistack props?

Current Behavior

Because of the lamda functions below, the child component is getting re-rendered with every single update because of the functions are getting reinstantiated, regardless of the child component already having access to the notistack props.

        {handlePresentSnackbar => (
            <SnackbarContextNext.Consumer>
                {handleEnqueueSnackbar => (
                    <Component
                        {...props}
                        onPresentSnackbar={handlePresentSnackbar}
                        enqueueSnackbar={handleEnqueueSnackbar}
                    />
                )}
            </SnackbarContextNext.Consumer>

Steps to Reproduce

Link:

It turns out this the bug that I found in my project wasn't actually caused by this, but I'm going to leave it open because having lamdas in render functions is inherently bad for performance and the above description still stands true.