uc-react-portal-wrap
v2.0.0
Published
Higher order react component for rendering children at different mount points
Downloads
4
Readme
Higher order component for rendering children at different mount points other than the parent. Works only with a DOM.
Why
Sometimes it necessary to render part of your component outside of your main mount point. Modals, Mobile Trays, etc are good candidates for React Portal Wrap. Render a child to a completely different DOM element, but still share the parent state and props
Typical Render
render(
<div className="app-wrapper">
<div className=""inner>Rest of App</div>
</div>, document.getElementById('root')
);
Yields a 1-1 DOM representation:
<div id="root">
<div class="app-wrapper">
<div class=""inner>Rest of App</div>
</div>
</div>
<div id="footer">
...
</div>
With React Portal Wrap
render(
<div className="app-wrapper">
<div className=""inner>
Rest of App
</div>
<PortalWrap node={document.getElementById('footer')}>
Render Content in Footer
</PortalWrap>
</div>, document.getElementById('root')
);
Yields DOM:
<div id="root">
<div class="app-wrapper">
<div class=""inner>Rest of App</div>
</div>
</div>
<div id="footer">
Render Content in Footer
</div>
Props
node
{function():Node|Node}
Default:
() => document.body.appendChild(
document.createElement('div')
)
Reference to a HTMLElement/Node to mount the portal. Or a function that return a node. Defaults to a function appending a node to document.body
.