ToastContainer should be optional, defaulting to appending new toasts to the end of body

[NateRadebaugh]

Do you want to request a feature or report a bug?
Feature

What is the current behavior?

Many modal implementations append the modal/backdrop to the end of the body tag. This means that no matter where we put the <ToastContainer />, any time there is a modal the toasts will show behind the modal.

I suppose for some use cases, having an explicit <ToastContainer /> may be useful, but for our case of arbitrary modals showing arbitrary toasts, it is more of an implementation detail with unexpected quirks that make it not useful for us.

Proposal

For cases where no <ToastContainer /> has been loaded, perhaps the library could automatically append a <ToastContainer /> to the end of the body. In this case, any subsequent calls to show toasts should move that same container instance to the end of the body tag again.

POC
The following wrapper mostly meets the above stated goals, but has an issue where the timer from previous toasts is reset on showing new toasts:

https://codesandbox.io/s/ql6p6l3yyj

Is this something that would make sense for this library to support?

[fkhadra]

Hello @NateRadebaugh,

Your proposition make senses. I was thinking about something like that for the next release. For the implementation I would use react portals for that. What do you think ?

[NateRadebaugh]

Yeah react portals are probably the recommended way to create the experience I'm describing.

Not sure how you feel about adding another dependency, but it may be simpler for this component to use this library: https://github.com/tajo/react-portal

[cspicuzza]

Incase anyone needs a solution for this:

add <div id="toast-root"></div> to your html, preferably right above </body>

then create your toast component that will use portals to mount react-toastify

import React from 'react'
import ReactDOM from 'react-dom'
import { ToastContainer } from 'react-toastify'

const toastRoot = document.getElementById('toast-root')

export class ToastPortal extends React.PureComponent {
  render() {
    return ReactDOM.createPortal(<ToastContainer {...yourprops} />,toastRoot)
  }
}

add <ToastPortal /> to your project