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
0
votes
1 answer

Is it possible to dismiss all toasts without animation?

Based on react-toastify docs consumer might call import { toast } from 'react-toastify'; ... toast.dismiss(); to dismiss all the opened toasts on the screen. They will follow the preconfigured animation. The question is how to dismiss them…
Kirill Poddubnyi
  • 23
  • 4
0
votes
3 answers

ReactToastify position not working in React

toastify/dist/ReactToastify.css` and I can't manage the Toast to show in the bottom right. I'm using the exact code as the documentation. But it's not working import { ToastContainer, toast } from 'react-toastify'; import…
SDB_1998
  • 305
  • 5
  • 18
0
votes
0 answers

React-Toastify is showing toast to all user in socket.io room

I am emitting socket from express server whenever successful submission occurs and show toast to other user. But React-Toastify is showing toast to all members in room. React Code - useEffect(() => { socket.on('successful submission', (data) =>…
Satyam Kulkarni
  • 1
  • 1
  • 3
0
votes
0 answers

Wanted to show some success messgae in react app after successfull registration using toast method in axios post

Actually i wanted to show some successfull message after hitting signup button using axios post method so that i have used toastify module in react but only catch option is working then is not working ...i am stuck here i dont know what to do...so…
Raushan Gandhi
  • 1
  • 3
0
votes
0 answers

react toastify return's error on mobile browsers

I tested react login page on my Iphone by accessing my PC's ip address.when i hit login button it gives me following error every time without showing error toast. in my pc's chrome browser its working perfectly in mobile view. Unhandled Rejection…
paduz
  • 21
  • 5
0
votes
1 answer

react-toastify: How to position the toasts a little up from the bottom

I want to position the toast at the bottom-right but with some offset from the bottom example,. Currently this is my ToastContainer definition ReactDOM.render( …
Santhosh
  • 9,965
  • 20
  • 103
  • 243
0
votes
2 answers

React-toastify toasts don't close

I have a react app and I use react-toastify to prompt for certain messages. However, whenever I click the x on the toasts they don't close. They do, however, close when I have autoClose: delay configured, as shown below. I can also drag them away…
vikx01
  • 53
  • 3
  • 6
0
votes
0 answers

how to make bounce animateion effect using pure css

Code below working fine, problem is I don want to use entire package since I only need few class of it, so I chekced source code and copy the class scopes on my page but its not working as expected.. import…
adeveloper
  • 311
  • 1
  • 4
  • 14
0
votes
1 answer

React-Toastify break all styles

I was using react-toastify for a while now, to display warnings. But now when I try to display the warnings, it just open a page with no style and the warning message. Like this: Is there any solution to this?
Mvrocha
  • 393
  • 3
  • 14
0
votes
1 answer

React-toastify notification won't return in conditional

The notification works quite easily with a button. However, I'm trying to have it activate when a props passes through (true/false). Basically, the user clicks on this tab, if they're not signed in, it'll pop up with the notification telling them to…
Seb
  • 133
  • 1
  • 12
0
votes
1 answer

Unable to display react-toastify

sandbox: https://codesandbox.io/s/angry-ganguly-6q0q2?file=/src/MessageToast.tsx With the above code I'm trying to display react-toastify with state using redux. Once I click the login button from an another component the error state changes to true…
PremKumar
  • 1,282
  • 4
  • 25
  • 43
0
votes
1 answer

Submit button is refreshing the page instead of submitting the form? (ReactJS and react-toastify)

As the title says, I have two buttons that have the exact same format, but one is refreshing the page when clicked instead of submitting the form. I just need it to trigger a toast. Here's the working button:
0
votes
2 answers

why do I get an error in react-toastify module?

I'm using react-toastify to pop up an error message. Why do I get this error? TypeError: Object(...) is not a function useToastContainer E:/Courses/programing/Code with Mosh/Front End/Mastering React/08 - Calling Backend Services (01h42m)/Section…
Ahmed Joda
  • 23
  • 2
  • 6
0
votes
0 answers

Need single block for all react toast messages either failure or success in react toastify

By default in react we receive react-toastify like in attached image below. But now project demands all messages in one block or div, with one cross button and notification count on top with one timer and with a scrollbar to see all messages. I have…
Sunniya Maini
  • 75
  • 1
  • 9
0
votes
0 answers

React Toastify appearing constantly

I'm using this (below Redirect from react-router-dom) to move from my Edit component to Profile component after updating some user info. Example:-
SunoKuni
  • 37
  • 6
1 2 3 4 5 6
7
8