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

ho to enable react-toastify in nextjs react-hook-form component?

in my next js component i am using the react-hook-form. when i am submitting the form i wish to toast the user a success\error msg. no matter what i do, i can not make the toast work. my code: component... const {register, reset,…
helpper
  • 2,058
  • 4
  • 13
  • 32
0
votes
2 answers

Why does React-hook-form error message runs twice?

I am validating fields with react-hook-form and besides having fields as required, I also run the toast to show user that field is required. I use the following function to achieve it: const runError = () => { if (!isValid &&…
NikaA3
  • 19
  • 3
0
votes
2 answers

how can i dismiss a particular toast from within the toast itself in react-toastify

I want to create a toast with two buttons "accept" and "reject". when I click reject I want to dismiss the only toast which contains these two buttons. i simply want the toast to disappear when i click the reject button inside the toast. Here is my…
LakshaySingh
  • 39
  • 4
0
votes
0 answers

How can "toast" (react-toastify) be initialized without launch it?

I need your help. I want to initialized a Toast instance with React.userRef, but without launch it, because I want to use that Ref Id to update any Toast type, and I don't know which Toast type (info, error, success) happens first. For…
Raul
  • 465
  • 5
  • 16
0
votes
1 answer

React Toastify Alert not displaying

I want a popup alert when the user interacts with a radio button. I have the relevant code below. When I select a radio button, I do get the console message but no pop-up. What am I doing wrong here? import {Toastify, toast} from…
Bayley Sapara
  • 45
  • 4
0
votes
2 answers

React-Toastify is not displaying properly

I am using React Toastify in my React.js file where i want to display a toast message that user successfully added. Therefore I used API to send the data to add in my database using Spring Boot which is working fine and i am using axios to display…
Mustafa_Dahodwala 19_13
  • 31
  • 3
0
votes
0 answers

how to distinguish click on toastify popup vs click on tag inside the popup

I want to display popups on my website using toastify. I want the default action when someone clicks on these popups to navigate to a page on my website (e.g. /product). However, I occasionally want the popup to contain a link to a review on an…
S. Imp
  • 2,833
  • 11
  • 24
0
votes
1 answer

react toastify does not show rejected promise error

I have an NFT contract and want to call buyNft // since contract is passed from outer scope, I need to create a new constant as an inner obj const _contract = contract; const buyNft = useCallback( async (tokenId: number, value:…
Yilmaz
  • 35,338
  • 10
  • 157
  • 202
0
votes
0 answers

how can I change default colours in react-toastify?

I'm trying to customize notifications in react-toastify. I need to change the color and width/height of the notification. I tried to reorder the data I needed in the styles of the library (file _variables.scss ), but this did not give any result The…
reduce10
  • 1
  • 2
0
votes
2 answers

how to customize react-toastify

I need to customize react-toastify. I tried to follow the advice from the documentation and change the styles in the .scss file. unfortunately this didn't work. tell me what am I doing wrong? I want notifications to look like on the picture how I…
reduce10
  • 1
  • 2
0
votes
0 answers

Why does this happen when I try to install react-toastify

How do I fix this. the toast functionality doesn't work. I was trying to install react-toastify
rayst4rk
  • 23
  • 4
0
votes
2 answers

How can I set up my toastify so it only shows up once on the time I specified?

so I am trying to get my toastify to only show up once five minutes before the time I have specified. I tried using the useEffect hook, but the toast still shows up every minute or so. The output I used to track if it the date works, and it does…
FishyK
  • 121
  • 1
  • 7
0
votes
0 answers

react toastify cannot reading content

export const LoginForm = () => { const setIsLogin = useSetRecoilState(isLoginAtom); const [isSubmitting, setIsSubmitting] = useState(false); const router = useRouter(); const onValid = ({ email, password }: LoginProps) => { axios …
JeongHaSeung
  • 393
  • 6
  • 12
0
votes
1 answer

How to render multiple toasts using map loop in react

I am trying to render multiple toasts using .map loop. But it is only the toast with the last element from the loop. var errorCount = { error1: 50, error2: 101, error3: 70, error4: 105 }; Object.keys(errorCount).map((element, index) => { …
Dev
  • 3
  • 2
0
votes
2 answers

A global reactJS Function to be called in all components and containers

I have setup a ToastContainer in my main App.js return (
Akash Mehta
  • 13
  • 4
1 2 3
4
5 6 7 8