React-toastify: Prevent Duplicates

[dekelb]

First - thanks for this project!

Is it possible to add an option to prevent duplicated messages?
Other toastr libraries have this feature and I really think it's a good one.

Thanks!

[fkhadra]

I'm glad you like it!

Good idea. I'll add a props preventDuplicated like you suggested.

[fkhadra]

The messages are transformed to a react component. You can also pass a component if you want too.
I need to find a way to shallow compare react component. Maybe if I convert the component to string and do a string comparison can be a solution. I'll make some test.

[fkhadra]

Hey @dekelb when you say "Prevent Duplicates" you mean show only one toast at time?

[dekelb]

Duplicates means if msg1 and msg2 have exactly the same content, don't show msg2.

For example:
Toastr1: "Message submitted"
Toastr2: "Message submitted"
Toastr3: "Thanks for registering"

There will be only two toastrs (1 and 3) because the content of 1 and 2 is exactly the same.

[fkhadra]

The role of the library is only to display a notification.
Regarding the behavior, I think that it's the responsibility of the developer to implement it.
Maybe i'm wrong

[dekelb]

I think that this feature is a very important one, and other toastr components has it so it's really a good one to have (and not really hard to implement).

Also - if you have multiple components in the page that generate toastrs - as a developer it will require you to manage a wrapper for the toastr to decide if to show some message or not (and this doesn't really make any sense).

[fkhadra]

You got me with: as a developer it will require you to manage a wrapper for the toastr to decide if to show some message or not :grin:

Another question comes to my mind. If I don't show duplicate should I reset the timer for the notification?

[dekelb]

No, I don't think you need to reset the time :)

[fkhadra]

Regarding the implementation, It's not as easy as you think. There are three use cases:

• string and number, easy to prevent duplicate:

toast("hello");
// Somewhere in the library code
if (isNumber(toastContent) || isString(toastContent)) {
  toastContent === anotherContent
}

• react component, not so easy:
  
  
  
  • If we render named component we could use the component name as follow:
  
  

toast(<MyComponent />);

// Somewhere in the library code
toastContent.type.name === MyComponent

• If we render something like:

toast(<div>plop</div>);
// toastContent.type will be equal to `div` so there is no way to check equality

I could prevent duplicates only for string, number and named component.
Or maybe something like:

toast("hello", {
  preventDuplicate: id-foo
});

//somewhere else

toast("hello", {
  preventDuplicate: id-foo
});

I guess I need to find something else. Any idea is appreciated

[ritz078]

Intead of accepting a string accept an object with id and message. This way it will be in user's control to prevent the type of duplicates he wants.

There may be case that the message is same and I don't wan't to prevent duplicate and change the UI. In that case if you handle equality by your own, I won't be able to do that.

[ismyrnow]

This seems like something that'd be trivial to do as a developer just by writing your own toast() function which wraps the library's one. Then you can determine how to identify duplicates however you want (ID, message equality, time between messages, etc.). Having the library do it invites complexity.

[fkhadra]

I understand both pov @dekelb @ismyrnow.
On one hand, it can ease the workload for the developer, on the other it will add complexity.

I'll think about it when I'm back from holiday.

[zeeshanjan82]

any solution to avoid displaying duplicate messages?

[fkhadra]

Hey @zeeshanjan82,

I will be able to work on the version 2 next week. I think I'll choose the solution proposed by @ritz078, what do you think ?

[manishbhatt94]

hey @fkhadra thanks for this nice project!
can we now use toast.isActive to determine whether a toast (containing a React component) is duplicate?
i tried using the method mentioned here, but no luck!

[fkhadra]

Hey @manishbhatt94,

May I ask you to reproduce the issue on codesandbox for example, so I'll be able to help you?

Thanks

[manishbhatt94]

Hey sorry for the late reply.
I put together a demo on codesandbox which is quite close to what we have, but couldn't seem to reproduce it here..
https://codesandbox.io/s/pm77rqqzmq
Will let you know if I am able to reproduce on codesandbox..

[heshamelmasry77]

i still have the duplicate problem

[fatima-zumen]

i still have the duplicate problem

[wesleytian]

Same, has the prop not been added yet? If only I had more time I'd make a PR myself...

[gags88]

I have solved duplicate toast issue as mentioned in their docs

https://fkhadra.github.io/react-toastify/prevent-duplicate

[thril]

I have solved duplicate toast issue as mentioned in their docs

https://fkhadra.github.io/react-toastify/prevent-duplicate

I did not see any option in their docs about preventing duplicates, but I checked on the source and you can achieve preventing duplicates by specifying the toastId option.

https://github.com/fkhadra/react-toastify/blob/e21b30c07e671905a924fe8910d53c4729610a90/test/components/ToastContainer.test.tsx#L88

In my particular case, I just used my toast message (which is always a string) as the toastId.

toast.error(<Alert alert={alert} />, { toastId: alert.message })