overleaf/services/web/frontend/js/shared/utils/external-script-loader.ts

32 lines
643 B
TypeScript
Raw Normal View History

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