fkhadra / react-toastify

React notification made easy 🚀 !
https://fkhadra.github.io/react-toastify/introduction
MIT License
12.33k stars 676 forks source link

Avoid calling onClose() callback, when toast is closed programtically #992

Closed Stophface closed 10 months ago

Stophface commented 10 months ago

Do you want to request a feature or report a bug? I am not sure if this is a feature or a bug ;)

What is the current behavior? The onClose() function gets called whenever the toast closes.

What is the expected behavior? I have a situation where the user can close a toast with an undo-button within the toast (comparable to the example here https://fkhadra.github.io/react-toastify/add-an-undo-action-to-a-toast) . However, when the user closes the toast through the undo button, I need a different behaviour compared to the situation when the toast closes itself after the defined autoClose time has passed

...
        const toastId = toast(
            <ToastUndo
                message={message}
                onClick={() => {
                    dispatch(...)
                    toast.dismiss(toastId)
                }}/>,
            {
                position: toast.POSITION.TOP_CENTER,
                autoClose: 3000,
                hideProgressBar: false,
                draggable: false,
                progress: undefined,
                theme: "colored",
                icon: false,
                type: 'success',
                onClose: () => _onCloseFancyToast(index, itemId),
                rtl: false
            }
        );
...

Basically, I only want the onClose() only to fire when the toast closes itself. When the toast is closed through toast.dismiss(toastId) I do not want the onClose() to fire. Is there a way to achieve this behaviour? I am not sure why in the procided example (https://codesandbox.io/s/l2qkywz7xl?from-embed=&file=/index.js:1466-1654) the behaviour from the onClose() is different from mine.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? "react": "^18.2.0", "react-dom": "^18.2.0", "react-toastify": "^9.1.3",

fkhadra commented 10 months ago

Hey @Stophface, there is no built-in way to accomplish what you want. But, it could be accomplished outside the library.

       let closedByUser = false;
        const toastId = toast(
            <ToastUndo
                message={message}
                onClick={() => {
                   closedByUser = true;
                    dispatch(...)
                    toast.dismiss(toastId)
                }}/>,
            {
                position: toast.POSITION.TOP_CENTER,
                autoClose: 3000,
                hideProgressBar: false,
                draggable: false,
                progress: undefined,
                theme: "colored",
                icon: false,
                type: 'success',
                onClose: () => {
                  if(!closedByUser) _onCloseFancyToast(index, itemId)
                },
                rtl: false
            }
        );