Render React DOM into a new context
npm install 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.
It also works in universal (isomorphic) React applications without any
additional setup and in React Native applications
when used correctly.
``sh`
$ npm install --save react-gateway
`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
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 (
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
);
}
}
``