CODEWITHSUNDEEP
reactjsreact-toastify
vikx01
vikx01

Reputation: 53

React-toastify toasts don't close

I have a react app and I use react-toastify to prompt for certain messages. However, whenever I click the x on the toasts they don't close. They do, however, close when I have autoClose: delay configured, as shown below. I can also drag them away and close that way.

Here is a little utility I have created to make a toast:

import { toast } from 'react-toastify';
export const notifyInfo = (msg, delay = 3000) => {
    toast.info(msg, {
        position: 'top-center',
        autoClose: delay,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined
    });
};

And here is how I use it on the component where I want to display the toast:

import { ToastContainer } from 'react-toastify';
import * as Msg from '../utils/messaging_utils';
...
...
Msg.notifyInfo("Test Message", 2500);

I'd greatly appreciate any pointers on how to make the close on click work.

I'm using the latest react-toastify i.e. version 7.0.4 btw, on downgrading to 6.2.0 I can see the close button work fine.

Upvotes: 0

Views: 13687

Answers (4)

Shubham Bhandari
Shubham Bhandari

Reputation: 1

i am getting a same issue and after removing all attribute it working fine.

<ToastContainer
    position="top-center"
    autoClose={3000}
  />

toast.success('Login Successful');

Upvotes: 0

TheKalashnikov
TheKalashnikov

Reputation: 391

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,
          });

Upvotes: 0

Ferran Casals
Ferran Casals

Reputation: 1

In my case, I added the className "toast-custom" and that was colliding with bootstrap class. Fixed updating className

Upvotes: 0

Al Mamun Khan
Al Mamun Khan

Reputation: 737

Solution:

  • import react toastify css
import 'react-toastify/dist/ReactToastify.css';
  • App.js should import
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

Upvotes: 6

Related Questions