MountAtSelector
This React component allows rendering components like a Modal outside the main React app.
Inspired by a blog of Ryan Zec: https://blog.komand.com/how-to-render-components-outside-the-main-react-app
Install
npm install --save mount-at-selector
Use
Create an extra container like #myModal
in your HTML:
Create a MountAtSelector
component in your React app:
import React from 'react'import ReactDOM from 'react-dom'import MountAtSelector from 'mount-at-selector' ReactDOM
Demo
See the folder /src
for a full demo. To run the demo, clone the git project
and run npm install; npm start
in the root of the project.
API
<MountAtSelector selector={string | Element}>
...
</MountAtSelector>
Properties:
selector
A query selector like'#myModal'
or a DOM element likedocument.getElementById('myModal)
. You can attach multipleMountAtSelector
components at the same selector.
License
MIT