react-jumpgate

A generic implementation of portals for React, for platforms where ReactDOM is not available
(eg. this could be used in a React Native application to add buttons to the toolbar from any component in the tree)

import createJumpgate from 'react-jumpgate';
// A jumpgate is made of 3 components: an anchor, a consumer and a provider
const { Anchor, Consumer, Provider } = createJumpgate();
const App = () => (
    <div class="app">
        {/* Place the anchor near the root of your component tree */}
        <Anchor>
            <div class="header">
                {/* The consumer acts as a placeholder for the component you want to teleport */}
                <Consumer ></Consumer>
            </div>
            <div class="content">
                {/* The provider will send its children through the jumpgate to the consumer */}
                <Provider>
                    <h1>Title</h1>
                </Provider>
            </div>
        </Anchor>
    </div>
);
/* <App ></App> will render as
    <div class="app">
        <div class="header">
            <h1>Title</h1>
        </div>
        <div class="content" ></div>
    </div>
*/