{"id":22221245,"url":"https://github.com/victorbadaro/react-modal-portal-example","last_synced_at":"2026-04-16T19:07:21.617Z","repository":{"id":194909467,"uuid":"691847133","full_name":"victorbadaro/react-modal-portal-example","owner":"victorbadaro","description":"An example of how to create a modal using portals","archived":false,"fork":false,"pushed_at":"2023-09-15T03:45:03.000Z","size":80,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-30T07:13:49.206Z","etag":null,"topics":["css","css-grid","css3","html","html-css","html-css-javascript","html5","portal","portals","react","reactjs","typescript","typescript-react","vite","vitejs"],"latest_commit_sha":null,"homepage":"https://react-modal-portal-example.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/victorbadaro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-09-15T02:44:01.000Z","updated_at":"2023-09-15T03:43:21.000Z","dependencies_parsed_at":"2023-09-15T18:42:12.210Z","dependency_job_id":null,"html_url":"https://github.com/victorbadaro/react-modal-portal-example","commit_stats":null,"previous_names":["victorbadaro/react-modal-portal-example"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victorbadaro%2Freact-modal-portal-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victorbadaro%2Freact-modal-portal-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victorbadaro%2Freact-modal-portal-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victorbadaro%2Freact-modal-portal-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/victorbadaro","download_url":"https://codeload.github.com/victorbadaro/react-modal-portal-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245422921,"owners_count":20612725,"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":["css","css-grid","css3","html","html-css","html-css-javascript","html5","portal","portals","react","reactjs","typescript","typescript-react","vite","vitejs"],"created_at":"2024-12-02T23:12:49.652Z","updated_at":"2026-04-16T19:07:21.574Z","avatar_url":"https://github.com/victorbadaro.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-modal-portal-example\n\n[![LEIAME.md](https://img.shields.io/badge/-Leia%20em%20Portugu%C3%AAs-brightgreen?style=for-the-badge)](./LEIAME.md)\n\nClick [here](https://react-modal-portal-example.netlify.app/) to access the demo website 🙂\n\n## Summary\n- [🧾 About](#-about)\n- [🚀 Main technologies](#-main-technologies)\n- [💻 Usage](#-usage)\n\n## 🧾 About\nThis is just an example of how to use portals to render a modal in React.\u003cbr /\u003e\n\nYou'll see the DOM like this (before rendering the modal):\u003cbr /\u003e\n![image](https://github.com/victorbadaro/react-modal-portal-example/assets/9096344/db7a0552-6dab-4f00-81e9-55f688504356)\u003cbr /\u003e\n\n...and then (after rendering the modal):\u003cbr /\u003e\n![image](https://github.com/victorbadaro/react-modal-portal-example/assets/9096344/d7f38153-e5d4-4297-b69a-742d483f9e4d)\n\n## 🚀 Main technologies\n- [React](https://react.dev/)\n- [Typescript](https://www.typescriptlang.org/)\n- [React Icons](https://react-icons.github.io/react-icons/)\n\n_(You can see all the dependencies in the [package.json](./package.json) file)_\n\n## 💻 Usage\n1. Clone the project (you'll need a [personal access token](https://docs.github.com/pt/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls)):\n   ```bash\n   $ git clone https://github.com/victorbadaro/react-modal-portal-example\n   ```\n\n2. Access its directory:\n   ```bash\n   $ cd react-modal-portal-example\n   ```\n\n3. Install its dependencies:\n   ```bash\n   $ yarn\n   # feel free to use another package manager, but you might want use yarn once there's already a yarn.lock file in the root directory\n   ```\n\n4. Start the server by running the `dev` script:\n   ```bash\n   $ yarn dev\n   ```\n---\n\n\u003cp align=\"center\"\u003eThis project was created and developed with ❤ by \u003ca href=\"https://github.com/victorbadaro\"\u003eVictor Badaró\u003c/a\u003e\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictorbadaro%2Freact-modal-portal-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvictorbadaro%2Freact-modal-portal-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictorbadaro%2Freact-modal-portal-example/lists"}