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