This PR will allow users to choose between displaying a single toast on the screen vs. displaying multiple toasts, with one line of code.
Displaying multiple toasts is still the default setting, so anyone using Toastify wouldn't be affected by these changes. The only difference is that with the new "single toast" approach, the toast duration is not honored. Meaning, if a new toast is about to appear, any toast(s) that are currently on the screen are then removed, regardless of how long they were supposed to be displayed for.
How To Use
Toastify.multiple = true; // Allows multiple toasts (default)
Toastify.multiple = false; // Only one toast can be on the screen
Toastify({
...
}).showToast()
Super easy! It can be toggled back and forth if it needs to be, but it only needs to be set once at the top of the script, before any toasts are created.
Testing
I want to start off by saying I have not tested this on all browsers. However, can confirm that it is working on these browsers:
Google Chrome (version 104.0.5112.102)
Firefox (version 80.0.1)
The code I added is very short and sweet so I would not worry too much about compatibility issues. The only functions I use that are worth looking into are:
Based on the results from caniuse.com, I don't think this will cause any issues.
Additional Comments
I took the liberty of updating the demo to include this "toggle" feature by adding a checkbox to toggle between the 2 states. Toggling the checkbox also updates the code displayed in the box. It can be viewed at https://trevorslobodnick.github.io/toastify-js/
I also updated the readme so the documentation now includes Toastify.multiple = true; at the top, and I also added myself to the contributors list.
Im new to this so please let me know if I need to add, edit, or remove anything.
Description
This PR will allow users to choose between displaying a single toast on the screen vs. displaying multiple toasts, with one line of code.
Displaying multiple toasts is still the default setting, so anyone using Toastify wouldn't be affected by these changes. The only difference is that with the new "single toast" approach, the toast duration is not honored. Meaning, if a new toast is about to appear, any toast(s) that are currently on the screen are then removed, regardless of how long they were supposed to be displayed for.
How To Use
Super easy! It can be toggled back and forth if it needs to be, but it only needs to be set once at the top of the script, before any toasts are created.
Testing
I want to start off by saying I have not tested this on all browsers. However, can confirm that it is working on these browsers:
The code I added is very short and sweet so I would not worry too much about compatibility issues. The only functions I use that are worth looking into are:
Based on the results from caniuse.com, I don't think this will cause any issues.
Additional Comments
I took the liberty of updating the demo to include this "toggle" feature by adding a checkbox to toggle between the 2 states. Toggling the checkbox also updates the code displayed in the box. It can be viewed at https://trevorslobodnick.github.io/toastify-js/
I also updated the readme so the documentation now includes
Toastify.multiple = true;at the top, and I also added myself to the contributors list.Im new to this so please let me know if I need to add, edit, or remove anything.
Thanks, Trevor Slobodnick