23 lines
552 B
TypeScript
23 lines
552 B
TypeScript
import { useRef, useEffect, useState } from 'react'
|
|
import { createPortal } from 'react-dom'
|
|
|
|
interface ModalPortalProps {
|
|
children: React.ReactNode
|
|
selector?: string
|
|
}
|
|
|
|
export const ModalPortal = ({
|
|
children,
|
|
selector = 'modal',
|
|
}: ModalPortalProps) => {
|
|
const ref = useRef<HTMLDivElement | null>(null)
|
|
const [mounted, setMounted] = useState(false)
|
|
|
|
useEffect(() => {
|
|
ref.current = document.querySelector(selector)
|
|
setMounted(true)
|
|
}, [selector])
|
|
|
|
return mounted && ref.current ? createPortal(children, ref.current) : null
|
|
}
|