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
42
votes
3 answers

How to use React.useRef() in class component?

I need this code to be implemented in class component. It is in order to use a upload progress in my class component with react-toastify function Example(){ const toastId = React.useRef(null); function handleUpload(){ axios.request({ …
MUHAMMED IQBAL
  • 637
  • 1
  • 5
  • 6
10
votes
1 answer

Toastify Reactjs adding a link

How do I add a link like 'Click here to view' in reactjs toastify and link it to some other url? Currently I can only add static text to it. I used: toast.info('some text') And I want to display another line saying click here to view with a href…
Amulya Dubey
  • 157
  • 1
  • 10
9
votes
4 answers

How to test react-toastify with jest and react-testing-library

I have a screen with some form, and on submission, I send the request to back-end with axios. After successfully receiving the response, I show a toast with react-toastify. Pretty straight forward screen. However, when I try to test this behavior…
Fatih Doğmuş
  • 411
  • 1
  • 4
  • 10
8
votes
4 answers

How can I change the styles of the react-toastify popup message?

I want to add my own custom style to the react-toastify message popup, depending on whether its success or error. So far I tried the following approach: toastify.js import { toast, Slide } from 'react-toastify'; import…
code_dude
  • 951
  • 2
  • 15
  • 28
5
votes
4 answers

TypeError: Object(...) is not a function when using react-toastify

I'm trying to get react-toastify to work in an app I'm writing while following an online course. I'm supposed to install a specific version but I always prefer using the very latest one but when I do, I'm getting a bunch of errors. I've gone to the…
Thierry
  • 6,142
  • 13
  • 66
  • 117
4
votes
3 answers

How to use react-toastify promise in axios

// how can I use the promise of toastify like I want to show spinner while fetching data then message success or failed // but I am getting error in bellow code const fetch = () => { axios .get("https://restcountries.com/v2/name/india") …
Mohsin Ghazi
  • 79
  • 1
  • 2
  • 6
3
votes
1 answer

How can i use React toastify (Promise) toast, with email js

I am currently using success and error toast with email js but i want to use toastify promise with my custom loader here is my current code import emailjs from "@emailjs/browser"; import { toast } from 'react-toastify'; export const sendEmail = ({…
Azeem Khan
  • 95
  • 5
3
votes
2 answers

How to use react-toastify outside component and use react component as body of it

I have a file called agent.ts that contains axios interceptors. In those interceptors I watch for any status code that is >= 400 and <= 500. When such error occurs, I am invoking react-toastify toast. Everything works perfect so far. What I want to…
Dobromir Ivanov
  • 313
  • 4
  • 12
3
votes
1 answer

why toast.update in React-Toastify v.9 doesn't work properly

why the type and autoClose property does not work? in version 9 of react toastify package. const toast1 = toast.loading("Please wait..."); const data = await setBooks(e); toast.update(toast1, { render: "Oooups.., something goes wrong!", …
Mustafa Zahedi
  • 103
  • 1
  • 1
  • 9
3
votes
1 answer

How can I add an undo button on my toast notification?

https://codesandbox.io/s/l2qkywz7xl?from-embed=&file=/index.js Hi referring to above sandbox, I would like to do something to my table as well, how can I add the undo function in my code? import { toast, ToastContainer } from…
fyceheist
  • 125
  • 4
3
votes
1 answer

How can i use react-toastify from hook?

I found useToast and useToastContainer, but documentation is absent and i don't understand how tu use these hooks. Can anyone provide some info about these hooks?
cikpak
  • 125
  • 2
  • 7
3
votes
8 answers

React-toastify showing multiple toast

I am building a React app with several components and in at least half of them I am using React-notify and it's working properly in almost all of them except one. In this one when I trigger the toast I'm getting four toasts, one behind the other,…
Berg_Durden
  • 1,531
  • 4
  • 24
  • 46
2
votes
1 answer

How to use toastify.js installed by npm? I get "Failed to resolve module specifier"

Im trying to use Toastify-js, a library for toast type messages, installing it using npm. In the documentation, after running the installing comand it says: -Import toastify-js into your module to start using it. import Toastify from…
Gonzalo
  • 21
  • 2
2
votes
0 answers

React toastify dismiss method not working?

While uploading file I want to show the progress of upload. So I used react toastify package. But after the upload completes I am calling dismiss() method to dismiss the toast programmatically but the toast is not closing. I also tried autoClose…
Gnanavel
  • 740
  • 6
  • 18
2
votes
0 answers

How to trigger React Toastify onClose only after toast closes?

The following code renders a toast: import { ToastContainer, toast } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; export default function App() { const notify = () => toast.success("Yabba dabba do", { onClose:…
Luke
  • 2,751
  • 1
  • 17
  • 20
1
2 3 4 5 6 7 8