djorg83 / react-bootstrap-sweetalert

A React implementation of SweetAlert
https://djorg83.github.io/react-bootstrap-sweetalert/
MIT License
252 stars 55 forks source link

Render in Portal #63

Open Riley-Brown opened 4 years ago

Riley-Brown commented 4 years ago

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 commented 3 years ago

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. image 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.