https://github.com/victorbadaro/react-modal-portal-example

An example of how to create a modal using portals
https://github.com/victorbadaro/react-modal-portal-example

css css-grid css3 html html-css html-css-javascript html5 portal portals react reactjs typescript typescript-react vite vitejs

Last synced: 2 months ago
JSON representation

An example of how to create a modal using portals

• Host: GitHub
• URL: https://github.com/victorbadaro/react-modal-portal-example
• Owner: victorbadaro
• Created: 2023-09-15T02:44:01.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-09-15T03:45:03.000Z (almost 3 years ago)
• Last Synced: 2025-01-30T07:13:49.206Z (over 1 year ago)
• Topics: css, css-grid, css3, html, html-css, html-css-javascript, html5, portal, portals, react, reactjs, typescript, typescript-react, vite, vitejs
• Language: TypeScript
• Homepage: https://react-modal-portal-example.netlify.app/
• Size: 78.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-modal-portal-example

[![LEIAME.md](https://img.shields.io/badge/-Leia%20em%20Portugu%C3%AAs-brightgreen?style=for-the-badge)](./LEIAME.md)

Click [here](https://react-modal-portal-example.netlify.app/) to access the demo website 🙂

## Summary

- [🧾 About](#-about)

- [🚀 Main technologies](#-main-technologies)

- [💻 Usage](#-usage)

## 🧾 About

This is just an example of how to use portals to render a modal in React.


You'll see the DOM like this (before rendering the modal):


![image](https://github.com/victorbadaro/react-modal-portal-example/assets/9096344/db7a0552-6dab-4f00-81e9-55f688504356)


...and then (after rendering the modal):


![image](https://github.com/victorbadaro/react-modal-portal-example/assets/9096344/d7f38153-e5d4-4297-b69a-742d483f9e4d)

## 🚀 Main technologies

- [React](https://react.dev/)

- [Typescript](https://www.typescriptlang.org/)

- [React Icons](https://react-icons.github.io/react-icons/)

_(You can see all the dependencies in the [package.json](./package.json) file)_

## 💻 Usage

1. 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)):

   ```bash

   $ git clone https://github.com/victorbadaro/react-modal-portal-example

   ```

2. Access its directory:

   ```bash

   $ cd react-modal-portal-example

   ```

3. Install its dependencies:

   ```bash

   $ yarn

   # 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

   ```

4. Start the server by running the `dev` script:

   ```bash

   $ yarn dev

   ```

---

This project was created and developed with ❤ by Victor Badaró