Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bsonntag/react-isomorphic-portals
Create react portals on the server
https://github.com/bsonntag/react-isomorphic-portals
portal react react-portals
Last synced: about 1 month ago
JSON representation
Create react portals on the server
- Host: GitHub
- URL: https://github.com/bsonntag/react-isomorphic-portals
- Owner: bsonntag
- License: mit
- Created: 2018-04-21T17:22:34.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-10-10T01:12:50.000Z (about 1 year ago)
- Last Synced: 2024-10-01T19:14:55.809Z (about 2 months ago)
- Topics: portal, react, react-portals
- Language: JavaScript
- Size: 931 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-isomorphic-portals
Create react portals on the server
## Installation
Using npm:
```sh
$ npm install --save react-isomorphic-portals
```
Using yarn:
```sh
$ yarn add react-isomorphic-portals
```
## Usage
On the server, create a `PortalCollector` and pass it as the `value` prop
of a `PortalCollectorProvider`:
```js
import { PortalCollector, PortalCollectorProvider } from 'react-isomorphic-portals';
import { renderToString } from 'react-dom/server';
// Where your server renders the application:
const collector = new PortalCollector();
const app = renderToString(
);
```
To create a portal, import `createPortal` from this module.
```js
import { createPortal } from 'react-isomorphic-portals';
const Modal = () => 'This is a modal component';
const ModalContainer = () => createPortal(, 'modal-root');
```
Note that this module's `createPortal` function receives an element ID
as its second argument, not a DOM element.
The `PortalCollector`'s `renderPortalsToStaticMarkup` method returns an object
containing all rendered portals. These should then be added to the HTML.
This can be done with whatever template engine you want.
Here's an example using template strings:
```js
const portals = collector.renderPortalsToStaticMarkup();
const html = `
Page Title
${app}
${portals['modal-root']}
`;
```
Another thing you'll need to do is remove the server rendered portals
on the client before the first render. This can be done like this:
```js
document.getElementById('modal-root').childNodes.forEach(node => node.remove());
```
This is needed because React will ignore the server renderer portals
and add the portals another time.
## API
### `createPortal(children: React$Node, elementId: string): React$Node`
The first argument (`children`) is any renderable React child,
such as an element, string, or fragment.
The second argument (`elementId`) is the ID of a DOM element.
### `PortalCollector`
Collects portals on the server for rendering to static markup.
#### `renderPortalsToStaticMarkup(): { [elementId: string]: Array }
Returns an object whose keys are the DOM element IDs passed to `createPortal`
and whose values are arrays of renderer portals.
These arrays should be added to the HTML on the server.
### `PortalCollectorProvider`
Provides a `PortalCollector` context that is used when calling `createPortal`
on the server.
## Contributing
Please feel free to submit any issues or pull requests.
## License
MIT