上手指南
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 }