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
1
vote
3 answers

How I can use react-toastify promise while posting date using axios

// Want to show spinner while posting and then success/error message using react-toastify Is it possible? axios.post("/orders.json", order) .then((response) => { console.log(response.status); }) .catch((error) => { …
Mohsin Ghazi
  • 79
  • 1
  • 2
  • 6
1
vote
1 answer

how do i make to appear the react toastify without using onClick button? it should appear once the page loads

the code I'm showing is a react toastify library with onClick button and custom autoclose set time for 1 minute. I want to use the library without using the button but when the page loads can somebody help me how to achieve that? import React, {…
NoLongerHuman
  • 13
  • 5
1
vote
1 answer

how can I pass success or error message using react-toastify when using axios method

I want to show success or error message depending upon the HTTP response status code that I will receiving upon sending my axios request ,using react-toastify (For example if the status code is 406 react-toastify should show a error message like…
AHMAD IRSHAD
  • 109
  • 1
  • 2
  • 8
1
vote
1 answer

How do you access and declare the types of a react component?

Here I have a component that should print a toast adding an icon to the content depending on the type of the toast: import * as React from 'react'; import { toast } from 'react-toastify'; import { FaInfo, FaCheck, FaExclamationTriangle, FaBug,…
Nicolás Guasca Santamaría
  • 61
  • 1
  • 5
1
vote
0 answers

How to call toaster component in ReactJs whIle using websockets

I'm using react toastify to display toast message and I'm aware of using toaster in saga on return of promise/response. But in this case, I need to listen to a channel and whenever any message is received through the websockets channel I need to…
iAmSherlocked
  • 11
  • 1
1
vote
0 answers

Toastify classes not working in my react app component

I'm trying to use toastify in my project but it seems that react is not picking up the classes library. I can see the display message when I do my action but it appears in just text and as a normal div. I have modified by webpack so I can use css…
Carlos Escobar
  • 422
  • 3
  • 15
1
vote
1 answer

How to display toast using react-toastify inside class component when props check is true

I am working on react project where i am trying to display toast using react-toastify , inside a div section when props ( isNotificationOpen ) is true. I tried an example something like bellow but i dont want the toast be triggered when button press…
Divakar R
  • 773
  • 1
  • 8
  • 36
1
vote
1 answer

How to work with setInterval to trigger an event? JavaScript/React-toastify

I have a redux store that contains an object that looks like rooms: { room01 : { timestamp: 10} room02 : { timestamp: 10} } When a user clicks on a button the timestamp is set to 10 (via dispatch). If there is a timestamp I count down to 0…
Jereme
  • 427
  • 7
  • 15
1
vote
1 answer

React Toastify - Not getting error notification

What I want is, when I get no data from the api, instead of this No data, I want A notification or toast.error to get displayed. shops.jsx import React from 'react'; import './shops.css'; import Shop from './shop' import { ToastContainer, toast }…
Himanshu Bhardwaj
  • 852
  • 6
  • 18
1
vote
1 answer

Props received after api hit in Redux loading two times results in React Hooks

I am getting the state from reducer but it is loading two times e.g. when I am getting the state Toaster is showing up two times. So, the problem is I am getting the login api Login Failed state twice due to this Toaster is loading two times. I try…
vikas dhiman
  • 297
  • 3
  • 19
1
vote
1 answer

React Toastify with Bootstrap 4

Is there any way I can use react-toastify with Reactstrap's Toast component, or the Bootstrap 4 toast classes? Here's my current config: import { toast } from 'react-toastify' toast.configure({ toastClassName: 'toast', // Bootstrap class …
Ben Botvinick
  • 2,837
  • 3
  • 16
  • 41
0
votes
0 answers

React-toastify does not slide down smoothly off the screen

I am able to render the react-toastify. However, the problem I am facing is that the toasts do not slide down the screen completely smoothly. I am using cssTransition for animation. The toast folds and does slide off the screen. Notification starts…
JustAG33K
  • 1,403
  • 3
  • 13
  • 28
0
votes
0 answers

react-toastify toasts from an external npm library not rendering

I have a basic react app where I installed my own npm general library that contains general components (Buttons, Grids etc.) and a file with API calls that launch toasts upon certain returned statuses such as 500, 200 etc. It looks like this. import…
Claim
  • 775
  • 3
  • 12
  • 32
0
votes
0 answers

Toast message with wrong mark always positive

getting correct mark with correct message i want crros mark for the following code i am getting same(positive sign in toast message with coreect message why so plx check it once.. const navigate=useNavigate(); const onFinish = async(values)=>{ …
Himanshu Prem
  • 21
  • 3
0
votes
2 answers

React-Toastify Styling Issue in TypeScript - Unable to Set z-index for Toast Container

I am currently developing a React application using TypeScript and have integrated the React-Toastify library for displaying notifications. However, I am facing some styling issues with the ToastContainer component. Specifically, I want to set the…
Gayle. B
  • 20
  • 5
1 2
3
4 5 6 7 8