react-portal-wrap

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.