使用脚本

与 useScript 你可以懒惰地装入外部第三方脚本,即你的 组件可能取决于。 它检查是否要求 url 已经存在并重新使用,而不是创建新的负载请求.

检查 故事书 演示.

安装

yarn add @charlietango/use-script

API 密码

const [ready, status] = useScript(url)

钩子返回一个数组,其中第一个值是一个布尔表示脚本是否准备好 . 第二个值是当前装入状态,这将是 ScriptStatus 元素值 :

enum ScriptStatus {
  IDLE = 'idle',
  LOADING = 'loading',
  READY = 'loaded',
  ERROR = 'error',
}

示例

import React from 'react'
import useScript, { ScriptStatus } from '@charlietango/use-script'

const Component = () => {
  const [ready, status] = useScript('https://api.google.com/api.js')

  if (status === ScriptStatus.ERROR) {
    return <div>Failed to load Google API</div>
  }

  return <div>Google API Ready: {ready}</div>
}

export default Component