上手指南
Hooks 列表
后期规划
上手指南
Hooks 列表
后期规划
简体中文

useScriptTag

Tags:
Element

一个方便在 React 中向文档添加 script 标签的 React Hook。

演示

源码
Script Loaded:
false

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook🎨 Demo📄 Document

API

const { scriptTag, load, unload } = useScriptTag(src, onLoaded, options)

源地址 Src

一个表示要加载的脚本 URL 的 string 类型。

载入完成 OnLoaded

当脚本被加载时将会调用的一个 function 。

选项 Options

export type ReferrerPolicy =
  | 'no-referrer'
  | 'no-referrer-when-downgrade'
  | 'origin'
  | 'origin-when-cross-origin'
  | 'same-origin'
  | 'strict-origin'
  | 'strict-origin-when-cross-origin'
  | 'unsafe-url'

export interface UseScriptTagOptions {
  /**
   * 装载时是否立即加载脚本
   *
   * @defaultValue true
   */
  immediate?: boolean
  /**
   * 脚本是否以异步方式加载
   *
   * @defaultValue true
   */
  async?: boolean
  /**
   * 脚本的类型
   *
   * @defaultValue 'text/javascript'
   */
  type?: string
  /**
   * 是否手动控制脚本的加载
   *
   * @defaultValue false
   */
  manual?: boolean
  /**
   * `crossorigin` 属性的值
   *
   * @defaultValue undefined
   */
  crossOrigin?: 'anonymous' | 'use-credentials'
  /**
   * `referrerpolicy` 属性的值
   *
   * @defaultValue undefined
   */
  referrerPolicy?: ReferrerPolicy
  /**
   * 脚本是否为模块脚本
   *
   * @defaultValue undefined
   */
  noModule?: boolean
  /**
   * 脚本是否延迟加载
   *
   * @defaultValue false
   */
  defer?: boolean
  /**
   * 设置在脚本元素上的额外属性
   *
   * @defaultValue {}
   */
  attrs?: Record<string, string>
}

返回值

export type UseScriptTagReturns = {
  /**
   * 脚本元素的 Ref
   */
  scriptTag: MutableRefObject<HTMLScriptElement | null>
  /**
   * 加载脚本
   *
   * 如果等待脚本加载完成，则默认为 `true`
   */
  load: (waitForScriptLoad?: boolean) => Promise<HTMLScriptElement | boolean>
  /**
   * 卸载脚本
   */
  unload(): void
}