fkhadra / fkhadra/react-toastify
Remounting the `ToastContainer` causes it to lose state
- Dominant language
- TypeScript
- Stars
- 13.4k
- Forks
- 741
- PR merge metrics
- No merged PRs in 30d
Description
I'm trying to use react-toastify in an app that uses HTML `` elements for modals. Due to the issues described [here](https://github.com/whatwg/html/issues/10811), in order to make this work with toast notifications, I need to use `createPortal()` to render the `` inside the ``. Otherwise toasts will be (1) rendered behind the modal, and (2) will not be interactive because they're in the "inert" part of the document.
I'm using `createPortal()` to render the `` in the top-most `` modal. However, if any toast messages are already open, this state is lost when the modal is opened/closed.
It seems that the state itself is already stored in a [single global store](https://github.com/fkhadra/react-toastify/blob/main/src/core/store.ts) (given that `containerId` is constant). So it should be possible for the `` to get this state on re-mount so that it shows any toast messages that are already there.
Contributor guide
Assessment
This issue has not been assessed yet.