“Portal personalizado React” Respostas de código

Portal personalizado React

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>