Prevent duplicate toast Chakra UI

Viewed 989

I am using chakra to prevent notifications from showing if they are already showing this.

But now I separated the notifications into another component:

import React from 'react';
import { createStandaloneToast } from '@chakra-ui/react';
import theme from '../theme';
    
const Notification = (title, description, status) => {
    const toast = createStandaloneToast({ theme: theme });

    toast({
        title: title,
        description: description,
        status: status,
        duration: 3000,
        position: 'bottom-right',
        isClosable: true,
      });

    return <></>;
};

export default Notification;

And in my components I use it as follows:

import React, { useContext } from 'react';
...

const RemoveToDo = () => {
    const remove = () => {
        ...
        Notification('Tarea eliminada.', 'Has eliminado la tarea.', 'success');
    };
};

How could you prevent them from duplicating now?

When I was using useToast and I didn't have separate notifications in another component, I was able to prevent them from being duplicated with this:

const id = 2;
if (!toast.isActive(id)) {
    toast({
        id: 2,
        title: 'Error al crear la tarea.',
        description: 'Ya tienes una tarea con esa descripción.',
        status: 'warning',
        duration: 3000,
        position: 'bottom-right',
        isClosable: true,
    });
};
0 Answers
Related