CODEWITHSUNDEEP
react-toastify
sokida
sokida

Reputation: 531

React toastify : Prevent displaying duplicate Toast

How can i prevent displaying duplicates toast in react-toastify. I have setTimeout function that call an api every 5 seconds when token expired ,It's return expired token in toast.err. I wanna to not display a lot of toast for every call

Upvotes: 2

Views: 5401

Answers (2)

Mahesh Jamdade
Mahesh Jamdade

Reputation: 20231

From the docs you need to add a unique id to each toast and only show toast if not active.


import { showToast } from '@/utils/toast_utils';
import { toast } from 'react-toastify';


const toastId = React.useRef('clipboard-toast');
const notify = () => {
    if (!toast.isActive(toastId.current!)) {
        showToast("success", <p> Copied to Clipboard! </p >,
            {
                toastId: 'clipboard-toast',
            }
        );
    }
}

Upvotes: 1

Vivek Sharma
Vivek Sharma

Reputation: 553

You just need to provide a custom id to your toasts if id will remain same it wont duplicate.

Reference

Upvotes: 5

Related Questions