Add Portal file
This commit is contained in:
parent
84b0934e0a
commit
d723b0bc1d
1 changed files with 23 additions and 0 deletions
23
src/Portal.tsx
Normal file
23
src/Portal.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { useEffect } from 'react'
|
||||||
|
import { createPortal } from 'react-dom'
|
||||||
|
|
||||||
|
const Portal = ({ children }) => {
|
||||||
|
let modalRoot = document.getElementById('modal')
|
||||||
|
|
||||||
|
if (!modalRoot) {
|
||||||
|
modalRoot = document.createElement('div')
|
||||||
|
modalRoot.setAttribute('id', 'modal')
|
||||||
|
document.body.appendChild(modalRoot)
|
||||||
|
}
|
||||||
|
|
||||||
|
const modalElement = document.createElement('div')
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
modalRoot.appendChild(modalElement)
|
||||||
|
return () => modalRoot.removeChild(modalElement)
|
||||||
|
})
|
||||||
|
|
||||||
|
return createPortal(children, modalElement)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Portal
|
||||||
Loading…
Reference in a new issue