How to override notification configuration for specific notification only?

March 24, 2022

I use react-toastify for notifications in my React app. In its configuration I’ve set a default autoClose setting. Is there a way that I can override this setting for specific notifications only? Please find my current code below.

I set react-toastify default configuration in the index page:

import { ToastContainer } from "react-toastify";
<ToastContainer
    closeButton={false}
    autoClose={6000}
/>

On other pages I for example have the code blow. It’s there where I would like to set a custom configuration for autoClose for that specific message only.

    Notify({
        message: `A message`,
    });

This uses a component called Notify:

const User = ({ message, closeToast }) => (
    <div key={0} className="notification">
        <span style={{ backgroundImage: `url('/icons/user.svg')` }}></span>
        <label dangerouslySetInnerHTML={{ __html: message }}></label>
        <button onClick={closeToast}>+</button>
    </div>
);

const Notification = (props) => {
    const { message, user } = props;
    return (
        <div>
            toast(<User message={message} />, {
                className: "white-background",
                bodyClassName: "grow-font-size",
                progressClassName: "fancy-progress-bar",
            })
        </div>
    );
};