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

create portal react

Add Answer

Brainy Bird answered on January 19, 2022 Popularity 10/10 Helpfulness 3/10

answer create portal react

related create react portal

related custom portal react

related React portal

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 portal

Link to this answer
Share Copy Link

Contributed on Apr 11 2023

Brainy Bird

0 Answers Avg Quality 2/10

Closely Related Answers

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 j

Link to this answer
Share Copy Link

Contributed on Jan 19 2022

Thankful Turtle

0 Answers Avg Quality 2/10

custom portal react

Comment

import { useEffect, useRef, useState } from 'react'
import { createPortal } from 'react-dom'

export function Portal({ children, selector }) {
  const ref = useRef()
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    ref.current = document.querySelector(selector)
    setMounted(true)
  }, [selector])

  return mounted ? createPortal(children, ref.current) : null
}

// Usage
<Portal selector="#modal">
  <h1> Hey </h1>
</Portal>

Popularity 9/10 Helpfulness 4/10 Language typescript

Source: Grepper

Tags: portal po

Link to this answer
Share Copy Link

Contributed on Mar 07 2022

Injury

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 9/10 Helpfulness 1/10 Language javascript

Source: github.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Apr 17 2024

kouqhar

0 Answers Avg Quality 2/10

create portal react

Contents

More Related Answers

create portal react

Closely Related Answers

create react portal

custom portal react

React portal

Grepper

Documentation

Social

Legal

Contact

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