{"id":13544608,"url":"https://github.com/cloudflare/react-gateway","last_synced_at":"2025-05-15T13:02:31.569Z","repository":{"id":43288470,"uuid":"45500296","full_name":"cloudflare/react-gateway","owner":"cloudflare","description":"Render React DOM into a new context (aka \"Portal\")","archived":false,"fork":false,"pushed_at":"2024-10-22T16:30:24.000Z","size":44,"stargazers_count":574,"open_issues_count":19,"forks_count":71,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-04-11T04:58:21.683Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cloudflare.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-11-03T22:36:06.000Z","updated_at":"2025-02-11T15:48:20.000Z","dependencies_parsed_at":"2024-06-18T12:40:37.726Z","dependency_job_id":"6dea0c4e-e9dd-47fa-996a-7a41080c6358","html_url":"https://github.com/cloudflare/react-gateway","commit_stats":{"total_commits":54,"total_committers":17,"mean_commits":3.176470588235294,"dds":0.4814814814814815,"last_synced_commit":"729c3dd8f7a8164f0694e23898807fcadcad62f9"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudflare%2Freact-gateway","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudflare%2Freact-gateway/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudflare%2Freact-gateway/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudflare%2Freact-gateway/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudflare","download_url":"https://codeload.github.com/cloudflare/react-gateway/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248345273,"owners_count":21088244,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T11:00:51.429Z","updated_at":"2025-04-11T04:58:32.244Z","avatar_url":"https://github.com/cloudflare.png","language":"JavaScript","readme":"# React Gateway\n\n\u003e Render React DOM into a new context (aka \"Portal\")\n\nThis can be used to implement various UI components such as modals.\nSee [`react-modal2`](https://github.com/cloudflare/react-modal2).\n\nIt also works in universal (isomorphic) React applications without any\nadditional setup and in React Native applications\n[when used correctly](#react-native-example).\n\n## Installation\n\n```sh\n$ npm install --save react-gateway\n```\n\n## Example\n\n```js\nimport React from 'react';\nimport {\n  Gateway,\n  GatewayDest,\n  GatewayProvider\n} from 'react-gateway';\n\nexport default class Application extends React.Component {\n  render() {\n    return (\n      \u003cGatewayProvider\u003e\n        \u003cdiv\u003e\n          \u003ch1\u003eReact Gateway Universal Example\u003c/h1\u003e\n          \u003cdiv className=\"container\"\u003e\n            \u003cGateway into=\"one\"\u003e\n              \u003cdiv className=\"item\"\u003eItem 1\u003c/div\u003e\n            \u003c/Gateway\u003e\n            \u003cGateway into=\"two\"\u003e\n              \u003cdiv className=\"item\"\u003eItem 2\u003c/div\u003e\n            \u003c/Gateway\u003e\n            \u003cdiv className=\"item\"\u003eItem 3\u003c/div\u003e\n          \u003c/div\u003e\n          \u003cGatewayDest name=\"one\" component=\"section\" className=\"hello\"/\u003e\n          \u003cGatewayDest name=\"two\"/\u003e\n        \u003c/div\u003e\n      \u003c/GatewayProvider\u003e\n    );\n  }\n}\n```\n\nWill render as:\n\n```js\n\u003cdiv\u003e\n  \u003ch1\u003eReact Gateway Universal Example\u003c/h1\u003e\n  \u003cdiv className=\"container\"\u003e\n    \u003cnoscript\u003e\u003c/noscript\u003e\n    \u003cnoscript\u003e\u003c/noscript\u003e\n    \u003cdiv className=\"item\"\u003eItem 3\u003c/div\u003e\n  \u003c/div\u003e\n  \u003csection className=\"hello\"\u003e\n    \u003cdiv className=\"item\"\u003eItem 1\u003c/div\u003e\n  \u003c/section\u003e\n  \u003cdiv\u003e\n    \u003cdiv className=\"item\"\u003eItem 2\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Usage\n\nTo get started with React Gateway, first wrap your application in the\n`\u003cGatewayProvider\u003e`.\n\n```diff\n  import React from 'react';\n+ import {\n+   GatewayProvider\n+ } from 'react-gateway';\n\n  export default class Application extends React.Component {\n    render() {\n      return (\n+       \u003cGatewayProvider\u003e\n          \u003cdiv\u003e\n            {this.props.children}\n          \u003c/div\u003e\n+       \u003c/GatewayProvider\u003e\n      );\n    }\n  }\n```\n\nThen insert a `\u003cGatewayDest\u003e` whereever you want it to render and give it a\nname.\n\n```diff\n  import React from 'react';\n  import {\n    GatewayProvider,\n+   GatewayDest\n  } from 'react-gateway';\n\n  export default class Application extends React.Component {\n    render() {\n      return (\n        \u003cGatewayProvider\u003e\n          \u003cdiv\u003e\n            {this.props.children}\n+           \u003cGatewayDest name=\"global\"/\u003e\n          \u003c/div\u003e\n        \u003c/GatewayProvider\u003e\n      );\n    }\n  }\n```\n\nThen in any of your components (that get rendered inside of the\n`\u003cGatewayProvider\u003e`) add a `\u003cGateway\u003e`.\n\n```diff\n  import React from 'react';\n+ import {Gateway} from 'react-gateway';\n\n  export default class MyComponent extends React.Component {\n    render() {\n      return (\n        \u003cdiv\u003e\n+         \u003cGateway into=\"global\"\u003e\n+           Will render into the \"global\" gateway.\n+         \u003c/Gateway\u003e\n        \u003c/div\u003e\n      );\n    }\n  }\n```\n\nIf you want to customize the `\u003cGatewayDest\u003e` element, you can pass any props,\nincluding `component` (which will allows you to specify a `tagName` or custom\ncomponent), and they will be passed to the created element.\n\n```diff\n  export default class Application extends React.Component {\n    render() {\n      return (\n        \u003cGatewayProvider\u003e\n          \u003cdiv\u003e\n            {this.props.children}\n-           \u003cGatewayDest name=\"global\"/\u003e\n+           \u003cGatewayDest name=\"global\" component=\"section\" className=\"global-gateway\"/\u003e\n          \u003c/div\u003e\n        \u003c/GatewayProvider\u003e\n      );\n    }\n  }\n```\n\n## How it works\n\nReact Gateway works very differently than most React \"portals\" in order to work\nin server-side rendered React applications.\n\nIt maintains an internal registry of \"containers\" and \"children\" which manages\nwhere things should be rendered.\n\nThis registry is created by `\u003cGatewayProvider\u003e` and passed to `\u003cGateway\u003e` and\n`\u003cGatewayDest\u003e` invisibly via React's `contextTypes`.\n\nWhenever a child or container is added or removed, React Gateway will\nupdate its internal registry and ensure things are properly rendered.\n\n## React Native example\n\nReact Gateway does not directly depend on `react-dom`, so it works fine with\nReact Native under one condition:\n\n**You must pass React Native component like `View` or similar to\n`component` prop of `\u003cGatewayDest\u003e`.**\n\nBecause if you don't, `\u003cGatewayDest\u003e` will try to render `div` element, which\nis not available.\n\n```js\nimport React from 'react';\nimport { Text, View } from 'react-native';\nimport {\n  Gateway,\n  GatewayDest,\n  GatewayProvider\n} from 'react-gateway';\n\nexport default class Application extends React.Component {\n  render() {\n    return (\n      \u003cGatewayProvider\u003e\n        \u003cView\u003e\n          \u003cText\u003eReact Gateway Native Example\u003c/Text\u003e\n          \u003cView\u003e\n            \u003cGateway into=\"one\"\u003e\n              \u003cText\u003eText rendered elsewhere\u003c/Text\u003e\n            \u003c/Gateway\u003e\n          \u003c/View\u003e\n          \u003cGatewayDest name=\"one\" component={View} /\u003e\n        \u003c/View\u003e\n      \u003c/GatewayProvider\u003e\n    );\n  }\n}\n```\n","funding_links":[],"categories":["UI Utilites","UI Utilities","JavaScript"],"sub_categories":["Portal"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudflare%2Freact-gateway","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudflare%2Freact-gateway","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudflare%2Freact-gateway/lists"}