npm i react-portalize
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 :)
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>-
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
- 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().
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>
`)
}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>
`)
)
}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.
MIT
