Toast not disappearing about react-toastify HOT 19 CLOSED

Hello @haydencarlson,

I think I have an idea why your toast it's not removed.

Your Authorization Component is getting mounted and umounted over and over again, so the <ToastContainer/> will be unmounted as well. When the ToastContainer is umounted, all the related events are unbound.

Move the ToastContainer at the root of your application to solve the issue.

from react-toastify.

same here, it doesn't disappear even if put the ToastContainer in the root of application

from react-toastify.

My problem was that if the progress bar was disabled hideProgressBar={true} at the ToastContainer props level, toasts didn't disappear automatically and autoClose={5000} setting was ignored. I've fixed it following @fkhadra advice and moving ToastContainer into my root component (App).

from react-toastify.

@fkhadra you were right.

Thanks !
Closing.

from react-toastify.

After researching a bit, it seemed that was a matter of importing the css file. Problem solved.

Additionally, there is any prop to disable the animations?

from react-toastify.

hello @haydencarlson,
Can you provide all the snippet ? So I can help you ?

Thanks

from react-toastify.

I have a view which contains the toast container

import React, { Component } from 'react';
import NavBar from '../components/navBar.js';
import { ToastContainer } from 'react-toastify';

export default class Authorization extends Component {
  render() {
    return (
      <div className="AuthorizationPageContainer">
        <NavBar/>
        <ToastContainer/>
      </div>
    )
  }
}

In one of my components:

handleFormSubmit = (e) => {
    e.preventDefault();
    if (this.state.password === this.state.password_confirmation) {
    } else {
      toast.success("Your passwords do not match", {autoClose: 4000});
    }
  }

It shows up fine, and everything seems to be working it just won't auto close unless I explicitly call toast.dismiss passing in the ID. I'd prefer not to run setTimeouts everytime haha

from react-toastify.

Anyone?

from react-toastify.

Hey @haydencarlson,

I took your code but I'm unable to reproduce the issue :( . Can you tell me more about your setup please ?

• Browser version
• Are you using react-router ?
• React version ?

from react-toastify.

Version 54.0.2840.90 (64-bit)

Using react router yes

React: 15.4.1

from react-toastify.

I'm getting the same exact issue. The ToastContainer is only defined in App.jsx:

const App = () => (
  <BrowserRouter>
    <main className="container">
      // Some more stuff goes here
      <Routes />
      <footer className="footer">Footer</footer>

      <ToastContainer autoClose={1000} />
    </main>
  </BrowserRouter>
);

And then calling in a component:

toast.success("Some success message", {
    className: "toast-success",
});

The toast shows up, shows the progress bar, although no progress bar animation is happening and the toast doesn't disappear after 1s.

React: 16.5.2
Chrome: 71.0.3578.98
Using react-router

Thoughts?

from react-toastify.

Hello @ecdeveloper,

Could you reproduce the issue on codesandbox please.

PS: next time don't hesitate to open a new issue. It's easier for me to keep a track on.

Thanks

from react-toastify.

hi @fkhadra,

Thanks for your reply. In sandbox it all works fine, so I think there may be some conflicting module (maybe?) in my setup. Will try to debug myself, thank you.

from react-toastify.

Magic. Removed the existing package. Reinstalled it. Everything works like a charm now. I think there might've been a glitch in the older version I was using before.

from react-toastify.

@ecdeveloper perfect probably a cache issue or something like that. I'm glad you fixed your issue 👍

from react-toastify.

This problems seems to persist. I am using the latest version (8.0.1). Reducer is being executed and triggering the REMOVE action.

from react-toastify.

@ricardoribas please provide a reproduction otherwise I cannot help :(

from react-toastify.

@fkhadra I don't know what's wrong with my configuration. Auto disappearing isn't working for me.

Brave Browser version: 1.36.109 Chromium
Also tested on the latest Firefox.
OS: Mac OS Monterey

react-toastify: ^8.2.0

Other project dependencies:

    "@apollo/react-hooks": "^3.1.5",
    "@material-ui/core": "^4.11.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "apollo-boost": "^0.4.9",
    "graphql": "^15.2.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-icons": "^4.3.1",
    "react-router-dom": "^6.2.1",
    "react-scripts": "3.4.1",
    "styled-components": "^5.3.3",
    "tailwindcss": "^3.0.22",
    "twin.macro": "^2.8.2"

import 'react-toastify/dist/ReactToastify.css'

Imported CSS in 'index.js'

import React from "react";
import ReactDOM from "react-dom";
import { ToastContainer } from "react-toastify";
import "./index.css";
import 'react-toastify/dist/ReactToastify.css';
import GlobalStyles from './styles/GlobalStyles'
import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
<React.StrictMode>
    <GlobalStyles />
    <App />
    <ToastContainer />
</React.StrictMode>,
document.getElementById("root")
);

Usage:

   toast.loading(status, {
    position: "top-right",
    autoClose: 1000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    progress: true,
});

It gets removed only if I click or drag it.

from react-toastify.

I still have the issue with progress toast on Mozilla (but not Chrome.)
A possible workaround is to set the progress to null and add an autoClose duration.

toast.update(toastMapId, {
            render: `100%`,
            type: 'success',
            hideProgressBar: false,
            autoClose: 1000,
            progress: null,
          });

from react-toastify.