Render a React component inline, but target a DOM element (or elements) by id or selector.
If you're making a shiny new React app where you use React everywhere, for every page, and for the entirety of every page, then you probably don't need this. But if you live in an imperfect world, where you have a server-generated header/footer or some static blog pages, or anything else not fully controlled by React, you can use an ElementPortal to control those things from inside a single root React element.
npm install react-element-portal --saveTo get an ElementPortal bound to Redux Provider, you can use react-redux-element-portal.
npm install react-redux-element-portal --saveLet's say we get this from the server:
<html>
<body>
<!-- Header generated by server -->
<div id="header">
<a href="/">Home</a>
<h1>My Sorta Cool App</h1>
<div id="user">Joe</div>
</div>
<!-- Container for React to do its thing -->
<div id="app"></div>
</body>
</html>Even though we don't control the header, we can pretend like parts of it are owned by a single React root element.
import ElementPortal from 'react-element-portal';
ReactDOM.render(
// Just rendering a single React element.
<div>
{/* Use some React to spice up our header. */}
<ElementPortal id="user">
<div>
<Menu>
<Label>Joe</Label>
<Items>
<Item>Upgrade</Item>
<Item>Settings</Item>
<Item>Support</Item>
</Items>
</Menu>
</div>
</ElementPortal>
{/* And render our main app as a sibling. */}
<div>
<h1>My App</h1>
<p>This is my main app and gets rendered to #app.</p>
</div>
</div>,
document.getElementById('app')
);You can also use a selector instead of an id.
<ElementPortal selector=".header .user">
<div>
...
</div>
</ElementPortal>When we render outside your main tree, context will be lost. For example, if you use with Redux, the store context gets lost, so connect won't work on children of your ElementPortal. You can use createElementPortal to create a custom ElementPortal that passes along context.
An example with Redux:
import { createElementPortal } from 'redux-element-portal';
import { Provider } from 'react-redux';
// Bind an ElementPortal to a Provider component and pass 'store' context into that provider.
const ElementPortal = createElementPortal(Provider, ['store']);
const UserMenu = ({user}) => (
<div>
<Menu>
<Label>{user.firstName}</Label>
<Items>
<Item>Upgrade</Item>
<Item>Settings</Item>
<Item>Support</Item>
</Items>
</Menu>
</div>
);
const UserMenuContainer = connect(state => ({
user: state.user
}))(UserMenu);
ReactDOM.render(
<Provider store={store}>
<div>
<ElementPortal id="user">
<UserMenuContainer/>
</ElementPortal>
</div>
</Provider>,
document.getElementById('app')
);Redux is just an example here. You can pass along any context with your own custom component like Provider. Look at the source for Provider for reference. It's pretty simple. Just define some context that gets transferred from props to child context. Combine that with createElementPortal to customize your ElementPortal. If you want to use Redux and some other custom context, just compose them together, creating your own Provider that internally also uses Redux's Provider.
For Redux, you don't actually have to use createElementPortal at all, because there's already an npm package you can use that does it for you.
import ElementPortal from 'react-redux-element-portal';
// ElementPortal is already bound to Provider.