react-portalize
v2.1.0
Published
```jsx harmony import Portalize from 'react-portalize'
Downloads
4,727
Maintainers
jaredlundeReadme
A convenient component for injecting elements into React Portals via DOM selectors. You may optionally choose to render your portals on the server side as well :)
Quick Start
import Portalize from 'react-portalize'
// renders 'Hello' into <div id='portals'/>
<Portalize container='#portals'>
Hello
</Portalize>
// renders 'Hello' into all instances of <div class='portals'/>
<Portalize container='.portals'>
Hello
</Portalize>
// renders 'Hello' into all instances of <section/>
<Portalize container='section'>
Hello
</Portalize>
// renders 'Hello' into all instances of <div data-portalize="why not"/>
<Portalize container='div[data-portalize="why not"]'>
Hello
</Portalize>API
<Portalize>
container: string- The DOM selector you'd like to render your children into
- default
#portals
children: React.ReactNode- Anything React can render
server: boolean- If you want to skip rendering this component on the server side you can do
so with the
server={false}flag. You don't need to worry about turning this off if you aren't rendering on the server withrenderPortalsToString - default
true
- If you want to skip rendering this component on the server side you can do
so with the
providers {provider: React.ReactProvider, value: any}[]- Critically, this component will not work with portals in SSR that utilize context
out of the box. This is because the children are never rendered into the
virtual DOM tree on the server side. This hacky approach fixes that problem
by creating your portals with
<Provider value={}/>components wrapped around them. The providers supplied in the array are reduced from the right, so[a, b, c]renders as<a><b><c/></b></a>.<Portalize providers={[{provider: YourProvider, value: YourProviderValue}]}> <YourConsumer>{(value) => JSON.stringify(value)}</YourConsumer> </Portalize>
- Critically, this component will not work with portals in SSR that utilize context
out of the box. This is because the children are never rendered into the
virtual DOM tree on the server side. This hacky approach fixes that problem
by creating your portals with
react-portalize/server
renderPortalsToString(html <string>)
- Injects portals created within your App into their respective containers.
You can provide either your entire
<!DOCTYPE html>string here or alternatively just the React root generated byReactDOMServer.renderToString().
SSR
Example with React root as the entry point
import {renderPortalsToString} from 'react-portalize/server'
function serverRenderer req, res, next() {
const page = renderPortalsToString(
ReactDOMServer.renderToString(<App/>)
)
res.set('Content-Type', 'text/html').send(`
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello world app</title>
</head>
<body>
<div id="⚛️">${page}</div>
</body>
</html>
`)
}Example with HTML root as the entry point
import {renderPortalsToString} from 'react-portalize/server'
function serverRenderer(req, res, next) {
const page = ReactDOMServer.renderToString(<App />)
res.set('Content-Type', 'text/html').send(
renderPortalsToString(`
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello world app</title>
</head>
<body>
<div id="⚛️">${page}</div>
</body>
</html>
`)
)
}Note
You will receive a warning message in the console from ReactDOM.hydrate() in
"development" akin to Did not expect server HTML to contain the text node "Hello" in <div>..
This is because ReactDOM.hydrate() does not expect your portals to be rendered
into the App. You can safely ignore this warning.
LICENSE
MIT