{"id":30181089,"url":"https://github.com/jaredlunde/react-portalize","last_synced_at":"2025-08-12T08:07:30.233Z","repository":{"id":29356854,"uuid":"120705587","full_name":"jaredLunde/react-portalize","owner":"jaredLunde","description":" A component for injecting elements into React Portals via DOM selectors","archived":false,"fork":false,"pushed_at":"2023-01-06T01:43:54.000Z","size":2828,"stargazers_count":4,"open_issues_count":16,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-20T16:48:30.350Z","etag":null,"topics":["portal","react","react-context","react-context-api","react-dom","react-dom-server","ssr"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaredLunde.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-08T03:28:15.000Z","updated_at":"2022-10-16T22:00:14.000Z","dependencies_parsed_at":"2023-01-14T14:45:36.419Z","dependency_job_id":null,"html_url":"https://github.com/jaredLunde/react-portalize","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/jaredLunde/react-portalize","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredLunde%2Freact-portalize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredLunde%2Freact-portalize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredLunde%2Freact-portalize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredLunde%2Freact-portalize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaredLunde","download_url":"https://codeload.github.com/jaredLunde/react-portalize/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredLunde%2Freact-portalize/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270024697,"owners_count":24514054,"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","status":"online","status_checked_at":"2025-08-12T02:00:09.011Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["portal","react","react-context","react-context-api","react-dom","react-dom-server","ssr"],"created_at":"2025-08-12T08:06:47.406Z","updated_at":"2025-08-12T08:07:30.217Z","avatar_url":"https://github.com/jaredLunde.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003chr\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ch1 align=\"center\"\u003e\n    react-portalize\n  \u003c/h1\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=react-portalize\"\u003e\n    \u003cimg alt=\"Bundlephobia\" src=\"https://img.shields.io/bundlephobia/minzip/react-portalize?style=for-the-badge\u0026labelColor=24292e\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"Types\" href=\"https://www.npmjs.com/package/react-portalize\"\u003e\n    \u003cimg alt=\"Types\" src=\"https://img.shields.io/npm/types/react-portalize?style=for-the-badge\u0026labelColor=24292e\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"Code coverage report\" href=\"https://codecov.io/gh/jaredLunde/react-portalize\"\u003e\n    \u003cimg alt=\"Code coverage\" src=\"https://img.shields.io/codecov/c/gh/jaredLunde/react-portalize?style=for-the-badge\u0026labelColor=24292e\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"Build status\" href=\"https://travis-ci.org/jaredLunde/react-portalize\"\u003e\n    \u003cimg alt=\"Build status\" src=\"https://img.shields.io/travis/jaredLunde/react-portalize?style=for-the-badge\u0026labelColor=24292e\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"NPM version\" href=\"https://www.npmjs.com/package/react-portalize\"\u003e\n    \u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/react-portalize?style=for-the-badge\u0026labelColor=24292e\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"License\" href=\"https://jaredlunde.mit-license.org/\"\u003e\n    \u003cimg alt=\"MIT License\" src=\"https://img.shields.io/npm/l/react-portalize?style=for-the-badge\u0026labelColor=24292e\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cpre align=\"center\"\u003enpm i react-portalize\u003c/pre\u003e\n\u003chr\u003e\n\nA convenient component for injecting elements into React Portals via DOM selectors. You may optionally choose to render\nyour portals on the server side as well :)\n\n## Quick Start\n\n```jsx harmony\nimport Portalize from 'react-portalize'\n\n\n// renders 'Hello' into \u003cdiv id='portals'/\u003e\n\u003cPortalize container='#portals'\u003e\n  Hello\n\u003c/Portalize\u003e\n\n// renders 'Hello' into all instances of \u003cdiv class='portals'/\u003e\n\u003cPortalize container='.portals'\u003e\n  Hello\n\u003c/Portalize\u003e\n\n// renders 'Hello' into all instances of \u003csection/\u003e\n\u003cPortalize container='section'\u003e\n  Hello\n\u003c/Portalize\u003e\n\n// renders 'Hello' into all instances of \u003cdiv data-portalize=\"why not\"/\u003e\n\u003cPortalize container='div[data-portalize=\"why not\"]'\u003e\n  Hello\n\u003c/Portalize\u003e\n```\n\n## API\n\n### `\u003cPortalize\u003e`\n\n- `container: string`\n\n  - The DOM selector you'd like to render your children into\n  - **default** `#portals`\n\n- `children: React.ReactNode`\n\n  - Anything React can render\n\n- `server: boolean`\n\n  - If you want to skip rendering this component on the server side you can do\n    so with the `server={false}` flag. You don't need to worry about turning this\n    off if you aren't rendering on the server with `renderPortalsToString`\n  - **default** `true`\n\n- `providers {provider: React.ReactProvider, value: any}[]`\n  - Critically, this component will not work with portals in SSR that utilize context\n    out of the box. This is because the children are never rendered into the\n    virtual DOM tree on the server side. This hacky approach fixes that problem\n    by creating your portals with `\u003cProvider value={}/\u003e` components wrapped\n    around them. The providers supplied in the array are reduced from the\n    right, so `[a, b, c]` renders as `\u003ca\u003e\u003cb\u003e\u003cc/\u003e\u003c/b\u003e\u003c/a\u003e`.\n    ```js\n    \u003cPortalize providers={[{provider: YourProvider, value: YourProviderValue}]}\u003e\n      \u003cYourConsumer\u003e{(value) =\u003e JSON.stringify(value)}\u003c/YourConsumer\u003e\n    \u003c/Portalize\u003e\n    ```\n\n## react-portalize/server\n\n### `renderPortalsToString(html \u003cstring\u003e)`\n\n- Injects portals created within your App into their respective containers.\n  You can provide either your entire `\u003c!DOCTYPE html\u003e` string here or\n  alternatively just the React root generated by\n  `ReactDOMServer.renderToString()`.\n\n## SSR\n\n### Example with React root as the entry point\n\n```js\nimport {renderPortalsToString} from 'react-portalize/server'\n\nfunction serverRenderer req, res, next() {\n  const page = renderPortalsToString(\n    ReactDOMServer.renderToString(\u003cApp/\u003e)\n  )\n\n  res.set('Content-Type', 'text/html').send(`\n    \u003c!DOCTYPE html\u003e\n    \u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n      \u003ctitle\u003eHello world app\u003c/title\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n      \u003cdiv id=\"⚛️\"\u003e${page}\u003c/div\u003e\n    \u003c/body\u003e\n    \u003c/html\u003e\n  `)\n}\n```\n\n### Example with HTML root as the entry point\n\n```js\nimport {renderPortalsToString} from 'react-portalize/server'\n\nfunction serverRenderer(req, res, next) {\n  const page = ReactDOMServer.renderToString(\u003cApp /\u003e)\n\n  res.set('Content-Type', 'text/html').send(\n    renderPortalsToString(`\n      \u003c!DOCTYPE html\u003e\n      \u003chtml lang=\"en\"\u003e\n      \u003chead\u003e\n        \u003ctitle\u003eHello world app\u003c/title\u003e\n      \u003c/head\u003e\n      \u003cbody\u003e\n        \u003cdiv id=\"⚛️\"\u003e${page}\u003c/div\u003e\n      \u003c/body\u003e\n      \u003c/html\u003e\n    `)\n  )\n}\n```\n\n## Note\n\nYou will receive a warning message in the console from `ReactDOM.hydrate()` in\n\"development\" akin to `Did not expect server HTML to contain the text node \"Hello\" in \u003cdiv\u003e.`.\nThis is because `ReactDOM.hydrate()` does not expect your portals to be rendered\ninto the App. You can safely ignore this warning.\n\n## LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredlunde%2Freact-portalize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaredlunde%2Freact-portalize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredlunde%2Freact-portalize/lists"}