# 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 ); } } ```

react-gateway

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past