Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cloudflare/react-gateway
Render React DOM into a new context (aka "Portal")
https://github.com/cloudflare/react-gateway
Last synced: 2 days ago
JSON representation
Render React DOM into a new context (aka "Portal")
- Host: GitHub
- URL: https://github.com/cloudflare/react-gateway
- Owner: cloudflare
- License: bsd-3-clause
- Created: 2015-11-03T22:36:06.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2024-10-22T16:30:24.000Z (about 2 months ago)
- Last Synced: 2024-11-22T21:50:18.700Z (21 days ago)
- Language: JavaScript
- Homepage:
- Size: 43 KB
- Stars: 571
- Watchers: 16
- Forks: 72
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - react-gateway - Render React DOM into a new context (aka "Portal"). (UI Utilites / Portal)
- awesome-react-components - react-gateway - Render React DOM into a new context (aka "Portal"). (UI Utilities / Portal)
- awesome-react-components - react-gateway - Render React DOM into a new context (aka "Portal"). (UI Utilities / Portal)
README
# React Gateway
> Render React DOM into a new context (aka "Portal")
This can be used to implement various UI components such as modals.
See [`react-modal2`](https://github.com/cloudflare/react-modal2).
It also works in universal (isomorphic) React applications without any
additional setup and in React Native applications
[when used correctly](#react-native-example).
## Installation
```sh
$ npm install --save react-gateway
```
## Example
```js
import React from 'react';
import {
Gateway,
GatewayDest,
GatewayProvider
} from 'react-gateway';
export default class Application extends React.Component {
render() {
return (
React Gateway Universal Example
Item 1
Item 2
Item 3
);
}
}
```
Will render as:
```js
React Gateway Universal Example
Item 3
Item 1
Item 2
```
## Usage
To get started with React Gateway, first wrap your application in the
``.
```diff
import React from 'react';
+ import {
+ GatewayProvider
+ } from 'react-gateway';
export default class Application extends React.Component {
render() {
return (
+
{this.props.children}
+
);
}
}
```
Then insert a `` whereever you want it to render and give it a
name.
```diff
import React from 'react';
import {
GatewayProvider,
+ GatewayDest
} from 'react-gateway';
export default class Application extends React.Component {
render() {
return (
{this.props.children}
+
);
}
}
```
Then in any of your components (that get rendered inside of the
``) add a ``.
```diff
import React from 'react';
+ import {Gateway} from 'react-gateway';
export default class MyComponent extends React.Component {
render() {
return (
+
+ Will render into the "global" gateway.
+
);
}
}
```
If you want to customize the `` element, you can pass any props,
including `component` (which will allows you to specify a `tagName` or custom
component), and they will be passed to the created element.
```diff
export default class Application extends React.Component {
render() {
return (
{this.props.children}
-
+
);
}
}
```
## How it works
React Gateway works very differently than most React "portals" in order to work
in server-side rendered React applications.
It maintains an internal registry of "containers" and "children" which manages
where things should be rendered.
This registry is created by `` and passed to `` and
`` invisibly via React's `contextTypes`.
Whenever a child or container is added or removed, React Gateway will
update its internal registry and ensure things are properly rendered.
## React Native example
React Gateway does not directly depend on `react-dom`, so it works fine with
React Native under one condition:
**You must pass React Native component like `View` or similar to
`component` prop of ``.**
Because if you don't, `` will try to render `div` element, which
is not available.
```js
import React from 'react';
import { Text, View } from 'react-native';
import {
Gateway,
GatewayDest,
GatewayProvider
} from 'react-gateway';
export default class Application extends React.Component {
render() {
return (
React Gateway Native Example
Text rendered elsewhere
);
}
}
```