useInjectScript - Code Snippet

Bạn có thể sử dụng một hook cụ thể để tải một tập tin JavaScript vào trong một component React. Hook này sẽ sử dụng để chèn một tập tin JavaScript vào trong một thẻ script, và gọi hàm JavaScript để thực hiện một hành động.

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)
  }, [])

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>
    </>
  )
}

pages/index.js

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

•••