Stack Overflow
Stack Overflow

Questions tagged [react-toastify]

React-Toastify allows you to add notifications to your app with ease.

Some features of the library:

  • Easy to setup and customise
  • RTL support
  • Swipe to close
  • Can display a react component inside the toast
  • Has onOpen and onClose hooks. Both can access the props passed to the react component rendered inside the toast
  • Define behaviour per toast
  • Pause toast when window loses focus
  • You can control the progress bar ! :)

Check out the Github page for the project for more information and the documentation.

108 questions
2
votes
1 answer

How to use ToastContainer properly?

I am new to stackoverflow so I apologize if there are mistakes on "how to properly ask a question"? I am facing an issue with react-toastify in my reactJS app. I have a flight management system API created with spring-boot and it's working perfectly…
Luminary
  • 21
  • 1
  • 3
2
votes
3 answers

Customize toaster from react-toastify

I'm using this toaster, it works fine but I'm struggling to change it's style. This is my code so far: import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; function App(){ const notify…
Jean Pierre
  • 281
  • 8
  • 21
2
votes
1 answer

React toastify toast appears 4 times with every single call

I recently started using react-toastify and everything worked fine until I noticed this odd behavior. Here is my code: this.adderrorNotification('Error: Please try again!') adderrorNotification(message){ toast.error(message, { onClose: () =>…
Aravind Reddy
  • 353
  • 4
  • 18
2
votes
0 answers

Set React-Toastify toast limit programmatically to show and hide number of toast on the UI

I have a use case where max number of toast that can be displayed at a time is 2. If there are more than 2 toast then the total Number of toast is also displayed within the currently displayed 2 toasts. User Action 1 - The user can click on the…
Jereme
  • 427
  • 7
  • 15
2
votes
1 answer

Add Material Icon in React-Toastify Message

This is the code defined in one folder. I am tring to add the material Icon in this. But it is showing the error React' must be in scope when using JSX import { toast } from 'react-toastify'; import ErrorIcon from '@material-ui/icons/Error'; const…
Inamur Rahman
  • 2,913
  • 1
  • 27
  • 29
1
vote
1 answer

React-Toastify not rendering

I am currently using React-Toastify version 7.0.3 and have upgraded to 9.0.3. But with the updated version I am unable to render any notifcations as all. Steps I did: yarn add react-toastify@9.0.3 Changed Notification file import React from…
potterson11
  • 147
  • 7
1
vote
1 answer

RTK fetch query error is display toast multiple time

I am fetching data using RTK Query but when errors occur I create a toast using react-toastify library that shows a toast message multiple times how to prevent this? when I consol log I see that part of 'if' condition render multiple times. import…
Het Patel
  • 109
  • 7
1
vote
1 answer

How to give two messages to a single toast using react-toastify

I wanted to display a toast message when user clicked on favorite button, the message should be either Added to Fav or removed From Fav, but I want only a single toast to do it. Is it possible? If yes then how to implement it. I am able to display…
Ujjawal Mathur
  • 11
  • 2
1
vote
0 answers

How can I style a toastify toast in the same js file, without using the styled toastcontainer?

in my app I use the ToastContainer component to display more than one type of toast. I do not want them both to have the same style, therefore I cannot use a styled ToastContainer to achieve what I want. I know from the documentation for toastify…
FishyK
  • 121
  • 1
  • 7
1
vote
0 answers

How can I add a Mui Icon to my toast without it throwing an error/not aligning with the text?

I tried including a Info Icon from mui in md toast, but it didn't work. This is what I tried: import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; toast("Information Toast", { icon: , autoClose: false, }); And it…
FishyK
  • 121
  • 1
  • 7
1
vote
0 answers

Screen reader does not read Toast.announce on Firefox browser on Android Tab

I am having an issue with the screen reader not reading the React toast.announce on fire fox browser on Android Tab. export const announcePageNumber = (currentIndex, screensCount) => { Toast.announce(`Page ${currentIndex} of…
Test1 Account
  • 11
  • 1
1
vote
0 answers

Is there API to add a unique prefix to all `react-toastify` class names?

I'm working on a library that uses react-toastify v7 under the hood. The consumer application uses react-toastify v8. Both versions operate with the same class names but have different styles. That causes UI issues. // 8.0.1 .Toastify__toast-body { …
Kirill Poddubnyi
  • 23
  • 4
1
vote
1 answer

pop-up notification in react after login, How to make it so that it will on show the message one time when you first logged in?

I am using react-toastify for the popup messages, so after login when my page is redirected to profile.js, I added this useEffect that will run on mount to show notification useEffect(() => { notify(); }, []); const notify = () => …
Aniket
  • 13
  • 1
  • 4
1
vote
1 answer

React toastify : Prevent displaying duplicate Toast

How can i prevent displaying duplicates toast in react-toastify. I have setTimeout function that call an api every 5 seconds when token expired ,It's return expired token in toast.err. I wanna to not display a lot of toast for every call
sokida
  • 433
  • 1
  • 8
  • 21
1
vote
1 answer

how to change toastify loading bg while updating

I want to change bg-color of the notification. How can I do it .I am using Tailwind as css fram-work. it shows loading and success/error notification with bg-white class App extends Component { orderHandler = () => { toast.loading("Please…
Mohsin Ghazi
  • 79
  • 1
  • 2
  • 6
1
2
3 4 5 6 7 8