fkhadra / fkhadra/react-toastify

Remounting the `ToastContainer` causes it to lose state

Open
#1,200 5 comments 1 reaction 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.