❤
npm
Sign UpSign In

react-portalize
TypeScript icon, indicating that this package has built-in type declarations

2.1.0 • Public • Published

react-portalize

Bundlephobia Types Code coverage Build status NPM Version MIT License 

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 :)

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 with renderPortalsToString
    • default true

  • 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>

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 by ReactDOMServer.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

Readme

Keywords

Package Sidebar

Install

npm i react-portalize

Repository

github.com/jaredLunde/react-portalize

Homepage

github.com/jaredLunde/react-portalize#readme

Weekly Downloads

1,037

Version

2.1.0

License

MIT

Unpacked Size

24.7 kB

Total Files

32

Last publish

Collaborators

  • jaredlunde
Try on RunKit
Report malware