Render in Portal

[Riley-Brown]

I am building a new feature for work using SweetAlert and was running into some unexpected behavior when using the alert inside of a position sticky div.

Here's a quick video of the problem https://streamable.com/h3k50

I believe this is happening because SweetAlert appends a div relatively in the html markup which can cause issues if it's inside a container with overflow or in my case, position sticky container elements.

A solution I found was to render the alert in a React portal, which will append the alert to the end of html body, similar to a Bootstrap modal.

Here is the result after rendering in a portal https://streamable.com/xfm3a

Here is a code sandbox demoing my solution https://codesandbox.io/s/stupefied-roentgen-98ouz

Would be great if we had the option to pass a renderInPortal optional prop which would render using React portals.

Awesome work so far on this package, I've really been enjoying it 👍

[ManuDoni]

I had a strange issue when rendering a SweetAlert component inside a datatable cell (on a button click). The alert is shown inside the table body and not in foreground. I tried using Reactstrap modal and it worked but I would like to use SweetAlert instead. I believe that a react portal could be the solution.