https://github.com/jaredlunde/react-portalize
A component for injecting elements into React Portals via DOM selectors
https://github.com/jaredlunde/react-portalize
portal react react-context react-context-api react-dom react-dom-server ssr
Last synced: 7 months ago
JSON representation
A component for injecting elements into React Portals via DOM selectors
- Host: GitHub
- URL: https://github.com/jaredlunde/react-portalize
- Owner: jaredLunde
- License: mit
- Created: 2018-02-08T03:28:15.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:43:54.000Z (about 3 years ago)
- Last Synced: 2025-07-20T16:48:30.350Z (8 months ago)
- Topics: portal, react, react-context, react-context-api, react-dom, react-dom-server, ssr
- Language: TypeScript
- Homepage:
- Size: 2.7 MB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
react-portalize
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
```jsx harmony
import Portalize from 'react-portalize'
// renders 'Hello' into
Hello
// renders 'Hello' into all instances of
Hello
// renders 'Hello' into all instances of
Hello
// renders 'Hello' into all instances of
Hello
```
## API
### ``
- `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 `` components wrapped
around them. The providers supplied in the array are reduced from the
right, so `[a, b, c]` renders as ``.
```js
{(value) => JSON.stringify(value)}
```
## react-portalize/server
### `renderPortalsToString(html )`
- Injects portals created within your App into their respective containers.
You can provide either your entire `` string here or
alternatively just the React root generated by
`ReactDOMServer.renderToString()`.
## SSR
### Example with React root as the entry point
```js
import {renderPortalsToString} from 'react-portalize/server'
function serverRenderer req, res, next() {
const page = renderPortalsToString(
ReactDOMServer.renderToString()
)
res.set('Content-Type', 'text/html').send(`
Hello world app
${page}
`)
}
```
### Example with HTML root as the entry point
```js
import {renderPortalsToString} from 'react-portalize/server'
function serverRenderer(req, res, next) {
const page = ReactDOMServer.renderToString()
res.set('Content-Type', 'text/html').send(
renderPortalsToString(`
Hello world app
${page}
`)
)
}
```
## 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
.`.
This is because `ReactDOM.hydrate()` does not expect your portals to be rendered
into the App. You can safely ignore this warning.
## LICENSE
MIT