useInjectScript

Tạo một Hook để chèn file JS trong React
BackReact Component • 20/04/2022 • Edit on Github

Bạn có thể sử dụng code dưới đây để chèn một file JS vào dự án React của bạn!

./components/useInjectScript.js
import { useEffect } from "react"

export const useInjectScript = (src: string) =>
  useEffect(() => {
    // @ts-ignore
    if (window.__custom_injected__) return
    // @ts-ignore
    window.__custom_injected__ = true

    const script = document.createElement("script")
    script.src = src
    script.defer = true

    const onScriptError = () => script.remove()
    script.addEventListener("error", onScriptError)

    document.body.appendChild(script)
  }, [])
./pages/index.js
import { useInjectScript } from '../components/useInjectScript'

const Component = () => {
  useInjectScript('https://phannhatchanh.com/xxx/lib.js')
  
  return (
    <>
      <h1>Hello World</h1>
    </>
  )
}