mount-at-selector
v1.0.3
Published
Render React components like a Modal outside the main React app
Downloads
6
Maintainers
josdejongReadme
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-selectorUse
Create an extra container like #myModal in your HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="myModal"></div>
<div id="app"></div>
</body>
</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.render(
<div>
<p>
Content rendered inside the React app...
</p>
<MountAtSelector selector="#myModal">
<div>
I'm rendered inside the #myModal element,
outside of the React app.
</div>
</MountAtSelector>
</div>,
document.getElementById('app')
)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:
selectorA query selector like'#myModal'or a DOM element likedocument.getElementById('myModal). You can attach multipleMountAtSelectorcomponents at the same selector.
License
MIT