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

How to Prevent Duplication of React Toastify in Functional Components?

When I use React-Toast, It always duplication like the Image. How prevent the duplication? Toast Duplication Like This const Login = () => { // ========= Loading ============ if (loading) { return ; } // ========= Error…
Rahimuj570
  • 1
  • 1
0
votes
1 answer

React Toastify is broken while showing. How can I show react toastify correctly in the top of the page?

Hi i am trying to show react toastify but it is not showing correctly. It's broken while showing. Here is my code. import React from 'react'; import { toast, ToastContainer } from 'react-toastify'; const Toast = () => { const showToast = () =>…
Uttam Kumar Saha
  • 1
  • 2
0
votes
4 answers

react toastify with redux from axios API

i am trying to send the error messages that sent from my server ( express ) to axios and the error message displays in toastify component but the error message doesn't show up here is the login axios function with the toastify how can i display…
Razor Jhon
  • 115
  • 1
  • 12
0
votes
1 answer

How to change background color of a toast depending on theme? react-toastify

I got react-toastify installed, and my toasts are working, but I want to add them some custom styling depending on a theme, and none of the solutions I saw are working in my case. I don't want to overcomplicate it, I just want to change background…
BlackH3art
  • 436
  • 1
  • 7
  • 15
0
votes
1 answer

How to override notification configuration for specific notification only?

I use react-toastify for notifications in my React app. In its configuration I've set a default autoClose setting. Is there a way that I can override this setting for specific notifications only? Please find my current code below. I set…
Marty
  • 2,132
  • 4
  • 21
  • 47
0
votes
1 answer

How to display the message from controller (BE) in toast notification (toastify)

Summary: I am trying to display a message from controller (backend) in notification (toast) using (react-toastify). And then whenever i try to login (cliking the login button) with a wrong e-mail, a toast appears with a message that we can find in…
Ava
  • 512
  • 2
  • 26
0
votes
1 answer

React Hot Toast is not working in class component

React-hot-toast v4.1.1 is not working in my class component. Earlier I was using React toastify but now I switched to React hot toast. The react-hot-toast is continously giving the error. TypeError: Object(...) is not a…
Ammar Siddiqi
  • 35
  • 1
  • 3
0
votes
0 answers

Wrongly Styled React Toast

Im getting wrong styling for React Toast. Close button is too big, how do i customize it? Here is my Code signup.js Link for the Code: https://codesandbox.io/s/jolly-keldysh-ukogpn?file=/src/signup.js import Axios from 'axios' import React, {…
Dragon
  • 27
  • 1
  • 5
0
votes
1 answer

Toast.warn render twice on refresh of page

I'm facing an issue where the toast message is rendered twice on page load. The props are being passed with Link Create Person and another page by grabbing the…
learner62
  • 520
  • 3
  • 10
  • 26
0
votes
1 answer

How to fix "TypeError: rule.assign is not a function" when trying to import ReactToastify.css

I can import { ToastContainer } from 'react-toastify with no problems, but when I try to import 'react-toastify/dist/ReactToastify.css';, I get an…
ricemilk
  • 85
  • 1
  • 6
0
votes
1 answer

React-toastify duplicating toast

I have a mods page in my app which only moderators and administrators should be able to access. If a person tries to access it by directly typing the URL I have some logic that would redirect them. import { useHistory } from "react-router"; import…
Maypher
  • 90
  • 1
  • 11
0
votes
0 answers

Styling toast container by applying a SCSS class

I am trying to style the react-toastify toast container: Here is the SCSS: .toast { width: 30%; // affects the text, not the container font-size:…
AlwaysLearning
  • 7,257
  • 4
  • 33
  • 68
0
votes
2 answers

toast doesn't show correct style - nextjs

I'm using react-toastify. _app.tsx: import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; ... return (
S.M_Emamian
  • 17,005
  • 37
  • 135
  • 254
0
votes
1 answer

React-toastify :Addition of the colored theme in the toast options

I use react-toastify to display my toast, I created a component that allows me to display the toast according to the type. import { Slide, toast } from 'react-toastify'; const options = { autoClose: 5000, position:…
Greg-A
  • 772
  • 1
  • 19
  • 41
0
votes
1 answer

Show toast after a form submit

I want to submit a form and I want to reload the current page so that form gets refreshed and after refreshing I want to show the Api response in toast. When I comment out event.preventDefault(), it doesn't show toast after the reload. And when I…
Saadi
  • 121
  • 1
  • 8
1 2 3 4 5
6
7 8