Breaking News: Grepper is joining You.com. Read the official announcement!

create react portal

Add Answer

Thankful Turtle answered on January 19, 2022 Popularity 10/10 Helpfulness 4/10

answer create react portal

related create portal react

related React portal

create react portal

Comment

// modal file s an example

import React from 'react';
import ReactDOM from 'react-dom';

// create modal and use a portal to mount it in a specific DOM point
const Modal = (props) => {
  return (
    <React.Fragment>
      {ReactDOM.createPortal(
        <div>This is the modal</div>,
        document.getElementById('modal-root'),
      )}
    </React.Fragment>
  )
}


export default Modal;

// public html doc to define where the is the portal's destination
// in this case "modal-root"

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

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript react-portal

Link to this answer
Share Copy Link

Contributed on Jan 19 2022

Thankful Turtle

0 Answers Avg Quality 2/10

Closely Related Answers

create portal react

Comment

https://react.dev/reference/react-dom/createPortal

//  REACT
// createPortal lets you render some children into a different part of the DOM.
// the most notable/common entry point of react and JSX is <div id="root><div>
// with createPortal you can add a different dom Node to the index.html, target/select it and 
// add inject a JSX/Html content to it.  
// 
import { createPortal } from 'react-dom';

function MyComponent() {
  return (
    <div style={{ border: '2px solid black' }}>
      <p>This child is placed in the parent div.</p>
      {createPortal(
        <p>This child is placed in the document body.</p>,
        document.body
      )}
    </div>
  );
}

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Apr 11 2023

Brainy Bird

0 Answers Avg Quality 2/10

React portal

Comment

/* 
- Portals provide a first-class way to render children into a DOM node that 
exists outside the DOM hierarchy of the parent component. 

- Creates a Portal and renders content in the provided container(DOM Node) outside 
the default hierarchy.

- It’s important to note that the createPortal() function will not create the 
containerElement for us, we have to explicit do that in our "index.html" file 
E.g <div id="react-modal"></div>

- Creating a Portal accepts two parameter 
    content: any valid renderable React element
    containerElement: a valid DOM element to which we can append the content
	E.g ReactDOM.createPortal(content, containerElement);
*/

  import { createPortal } from 'react-dom';

  function Modal() {
    return createPortal(
      <section>
      	<p>This is an example or React Portal</p>
      </section>, 
      document.getElementById("react-modal")
    );
  }
  export default Modal;

// With love @kouqhar

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: github.com

Tags: javascript react-portal

Link to this answer
Share Copy Link

Contributed on Apr 17 2024

kouqhar

0 Answers Avg Quality 2/10

create react portal

Contents

More Related Answers

create react portal

Closely Related Answers

create portal react

React portal

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.