Render React DOM into a new context (aka "Portal")
This can be used to implement various UI components such as modals.
See react-modal2.
It also works in universal (isomorphic) React applications without any additional setup and in React Native applications when used correctly.
$ npm install --save react-gatewayimport React from 'react';
import {
Gateway,
GatewayDest,
GatewayProvider
} from 'react-gateway';
export default class Application extends React.Component {
render() {
return (
<GatewayProvider>
<div>
<h1>React Gateway Universal Example</h1>
<div className="container">
<Gateway into="one">
<div className="item">Item 1</div>
</Gateway>
<Gateway into="two">
<div className="item">Item 2</div>
</Gateway>
<div className="item">Item 3</div>
</div>
<GatewayDest name="one" component="section" className="hello"/>
<GatewayDest name="two"/>
</div>
</GatewayProvider>
);
}
}Will render as:
<div>
<h1>React Gateway Universal Example</h1>
<div className="container">
<noscript></noscript>
<noscript></noscript>
<div className="item">Item 3</div>
</div>
<section className="hello">
<div className="item">Item 1</div>
</section>
<div>
<div className="item">Item 2</div>
</div>
</div>To get started with React Gateway, first wrap your application in the
<GatewayProvider>.
import React from 'react';
+ import {
+ GatewayProvider
+ } from 'react-gateway';
export default class Application extends React.Component {
render() {
return (
+ <GatewayProvider>
<div>
{this.props.children}
</div>
+ </GatewayProvider>
);
}
}Then insert a <GatewayDest> whereever you want it to render and give it a
name.
import React from 'react';
import {
GatewayProvider,
+ GatewayDest
} from 'react-gateway';
export default class Application extends React.Component {
render() {
return (
<GatewayProvider>
<div>
{this.props.children}
+ <GatewayDest name="global"/>
</div>
</GatewayProvider>
);
}
}Then in any of your components (that get rendered inside of the
<GatewayProvider>) add a <Gateway>.
import React from 'react';
+ import {Gateway} from 'react-gateway';
export default class MyComponent extends React.Component {
render() {
return (
<div>
+ <Gateway into="global">
+ Will render into the "global" gateway.
+ </Gateway>
</div>
);
}
}If you want to customize the <GatewayDest> 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.
export default class Application extends React.Component {
render() {
return (
<GatewayProvider>
<div>
{this.props.children}
- <GatewayDest name="global"/>
+ <GatewayDest name="global" component="section" className="global-gateway"/>
</div>
</GatewayProvider>
);
}
}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 <GatewayProvider> and passed to <Gateway> and
<GatewayDest> 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 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 <GatewayDest>.
Because if you don't, <GatewayDest> will try to render div element, which
is not available.
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 (
<GatewayProvider>
<View>
<Text>React Gateway Native Example</Text>
<View>
<Gateway into="one">
<Text>Text rendered elsewhere</Text>
</Gateway>
</View>
<GatewayDest name="one" component={View} />
</View>
</GatewayProvider>
);
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent