Rendering React components to the document body

One of React’s best features is the simplicity of it’s API. A component can be as simple as a render method which returns the component’s structure – just write a simple function, and you have a useful, re-usable piece of code. There are times where this can be limiting, however. In particular, the fact that this API gives a component no control over where in the DOM it will be mounted makes popup components (like modals or menus) difficult to implement. Problems arise when a parent element has overflow set to 'hidden', for example, causing something a little like this:

Continue reading