overleaf/services/web/frontend/js/shared/utils/external-script-loader.ts
ilkin-overleaf c09e29c040 Merge pull request #11751 from overleaf/ii-payment-page-stories
[web] Payment page stories

GitOrigin-RevId: 9f8aff0cf839bc811d8612e97bd627b577860cc8
2023-02-14 09:04:25 +00:00

31 lines
643 B
TypeScript

import { useState, useEffect } from 'react'
type ExternalScriptLoaderProps = {
children: JSX.Element
src: string
}
function ExternalScriptLoader({ children, src }: ExternalScriptLoaderProps) {
const [loaded, setLoaded] = useState(false)
useEffect(() => {
const body = document.querySelector('body')
const script = document.createElement('script')
script.async = true
script.src = src
script.onload = () => {
setLoaded(true)
}
body?.appendChild(script)
return () => {
body?.removeChild(script)
}
}, [src])
return loaded ? children : null
}
export default ExternalScriptLoader