New modal built for React called react-stack-modal

Write your comment…

This is good, but I was planning to use Modals from react-bootstrap. How would you compare the two? Any reasons why I should choose react-stack-modal over react-bootstrap's modal?

I don't think it's good idea to replace Bootstrap Modal with stack-modal but I can talk about the pros and cons:

Bootstrap Modal is inserting DOM inside that <App> component. So it renders the virtual DOM of the modal every time there's an update. Also there's a <noscript> leaving inside the parent component.

stack-modal is moving modal totally to the top level of the DOM tree. Not only the DOM is mounted at top level, the data that represents the Modals is saved in Store, not in a component state. So no overhead of modal rendering if there's no modal. Suppose there's a list of things that need modals, there would be a big difference.

And bad part of stack-modal is 1) it's also totally decoupled from the component which opened it, there's no simple way to send event back or call a passed function, 2) there's an unsolved issue, "forced layout" during entering transition will break the whole CSS transition, probably a CSS issue but requires a requestAnimationFrame to fix.

Write a reply...

Join a friendly and inclusive Q&A network for coders

  • 🖥Pick the technologies you like & read great content through your feed.
  • 💬Ask a question when you want to learn more about anything.
  • 🚀Share what you know & build your portfolio.
Sign up nowLearn more

loading ...