0

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.

vikx01
  • 53
  • 3
  • 6
  • 1
    What's the z-index of the notify component and the button? Is there any other component where your prompt shows up that might interrupt with the close click? Try making the close button larger (scale it up), and click on it to see if it closes – Sarhad Salam May 20 '21 at 16:45
  • 1
    Thanks @SarhadSalam! The z-index of the toast container is 9999. There is no other component overlayed on top that might be interfering with the click event being not passed to the toast. The same setup with an older version of the library (6.2.0) seems to work just fine. For now, I'll just roll back the version. Thanks again for your response. – vikx01 May 20 '21 at 17:12

2 Answers2

3

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';
Al Mamun Khan
  • 551
  • 6
  • 7
0

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

Ferran Casals
  • 1