custom portal react

Injury answered on March 7, 2022 Popularity 9/10 Helpfulness 4/10

answer custom portal react

related create portal react

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 typescript

Link to this answer
Share Copy Link

Contributed on Mar 07 2022

Injury

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

custom portal react

Contents

More Related Answers

custom portal react

Closely Related Answers

create portal react

Grepper

Documentation

Social

Legal

Contact

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