React Portals Modal with Example

How to Use React Portals Modal with Example

We all need to How to Use React Portals Modal with Example at some point in most of our projects. We can import createPortal from react-dom to create a modal. Portals provide a way to provide children with a non-original DOM location available without parental DOM leadership.

Event Bubbling Through Portals

Although the site can be anywhere on the DOM tree, it behaves like a normal React child in every other way. Features like context work the same regardless of the child’s site, as the site still exists in the React tree regardless of the position in the DOM tree.

Read Also :  React API Call Using Fetch

This includes event breakdowns. The event cast inside the hole will spread the ancestors to the tree that contains the React, even if those items are not the ancestors in the DOM tree. Downloading the following HTML format:

<html>
  <body>
    <div id="app-root"></div>
    <div id="modal-root"></div>
  </body>
</html>

How to Use React Portals Modal with Example

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />

    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="preconnect" href="https://fonts.gstatic.com"
    <link href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@1,600&family=Lobster&display=swap" rel="stylesheet">
    <!-- Boostrap -->

    <link

      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
      crossorigin="anonymous"
    />

    <script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>

    <script
      src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
      crossorigin></script>

    <script
      src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
      crossorigin></script>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="root-app"></div>
  </body>
</html>

Index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

class Demo extends React.Component {    
    render () {    
        return (    
            <>  
                <h3>Index Component</h3>
                <App />  
            </>    
        );    
    }    
}    

ReactDOM.render(<Demo />,document.getElementById("root"));

App.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

export default class App extends Component {
    render() {
        return ReactDOM.createPortal (
            <h3>App Component</h3>,document.getElementById("root-app")
        )
    }
}