Questions tagged [notistack]

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.

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.

24 questions
19
votes
2 answers

What is causing this enqueue snackbar error for notistack?

I'm trying to use the useSnack hook from notistack library but I keep getting this error TypeError: Cannot destructure property 'enqueueSnackbar' of 'Object(...)(...)' as it is undefined. Here is the code: import React, { useContext, useEffect }…
Samuel Seibidor
  • 195
  • 1
  • 1
  • 4
8
votes
1 answer

TypeError: Cannot destructure property 'enqueueSnackbar'

I have a Jest unit test that is testing an error from a mocked API call to ensure that the error message is displayed on the page. In my actual file, I'm using notistack to display the error messages. I've not displayed the full API request because…
Adam
  • 2,384
  • 7
  • 29
  • 66
8
votes
1 answer

Mocking snackbar using jest

I try to test the following code import { useSnackbar, VariantType, WithSnackbarProps } from 'notistack'; import React from 'react'; interface IProps { setUseSnackbarRef: (showSnackbar: WithSnackbarProps) => void; } const…
Jens
  • 67,715
  • 15
  • 98
  • 113
6
votes
5 answers

How do I change the default background color of notistack in MUI v5?

The default background color is white, but I'd like to change it to a dark color. Dark mode is enabled in mui v5. I've found ways to change the error, info, etc., but what I want to do is to change the default background color without specifying any…
Jvn
  • 425
  • 4
  • 9
4
votes
0 answers

Error: Object(...) is not a function - Notistack

Node version : 8.10.0 Since I have updated my code on my WebApp, there is an error with notistack. I found then it could be helpful to upgrade material-ui version, but I cannot actualy. Until I re-build my app, it was working well. Package.json…
3
votes
0 answers

How can I set a global anchorOrigin direction for Notistack SnackbarProvider?

I'm now setting the anchorOrigin direction (which location the snackbar appears) on each individual enqueSnackbar(). How can I set it once at the provider level (I'm trying to set site-wide direction based on…
I Stand With Israel
  • 1,971
  • 16
  • 30
2
votes
2 answers

Shows random number enqueuesnackbar (notistack) in react js

I am using notistack package. need to show snackbar on the screen. while calling the Snack component which is using enquesnackbar it shows the snackbar but also show the random number on the screen. I want to remove that random number from screen.…
Shablcu
  • 295
  • 3
  • 11
2
votes
1 answer

Notistack enqueueSnackbar usage outside component

Is there any way to use enqueueSnackbar() outside the react component? For example, I want to show an alert on the service API request error. Api service request is called from redux action
programmer
  • 550
  • 2
  • 4
  • 25
2
votes
1 answer

How to make dialog appear over Snackbar?

Codesandbox: https://codesandbox.io/s/elegant-wind-mv842 As can be seen in the sandbox, I am using Notistack for snackbars. I also want to use MUI Dialogs, but the Snackbars appear over the dialogs, which I don't want. Is there a way to make the…
PunkyPunk
  • 21
  • 2
1
vote
0 answers

Why do I get this error when using the NPM link

I am learning the npm link and following the instructions. The library I want to link is notistack and I can in the terminal do "npm link" and all is good. When I do "npm notistack" to link the library in my project it looks OK like it works. But…
Kid
  • 1,869
  • 3
  • 19
  • 48
1
vote
1 answer

Reactjs Snackbar that show progress on its self

I learn React JavaScript and wanted to have snackbar that could show progress once it is showen. Like the Snackbar is showed as usual sliding out from the lover left and immediately start to show % progress for let's say some download. I tried the…
Kid
  • 1,869
  • 3
  • 19
  • 48
1
vote
0 answers

Error on Notistack after update Material UI to version Alpha 6

I need a feature from Material UI 6, which is variant, and I to get that feature I have update my dependencies and fixed all breaking changes, but now I receive this error: index.js:1 Warning: Unknown event handler property `onEnter`. It will be…
Luis Souza
  • 365
  • 1
  • 3
  • 11
1
vote
4 answers

Unable to use a hook in a component

I am trying to use a hook but I get the following error when using the useSnackbar hook from notistack. Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following…
Sri
  • 2,281
  • 2
  • 17
  • 24
0
votes
0 answers

Notistack works on browser but not on cypress

I am using notistack with mobx,so whenever the state changes ,the toast will be shown using the enqueuesnackbar fucntion. After upgrading mobx to version 6 it is not working on cypress. It seems there is no issue with the mobx since other console…
0
votes
1 answer

React hook reference is lost when its called outside of React components

The following code used to work in earlier versions of ReactJS but now it seems useSnackbarRef loses its value and is undefined inside handler function, what has changed in React and how can I fix this utility? The goal of the utility is to enable…
Ali Ahmadi
  • 701
  • 6
  • 27
1
2