useScriptTag

v0.0.15testeddemo

Dynamically inject and manage a `<script>` tag. The returned `load`/`unload` controls append the element to the document `<head>` (reusing an existing tag with the same `src`) and resolve once the script has loaded. Loading is de-duplicated, listeners are passive, and everything is SSR-safe.

Source Tests

Examples

const { scriptTag, load, unload } = useScriptTag(
  'https://example.com/sdk.js',
  (el) => console.log('loaded', el),
);

// Manual control
const { load, unload } = useScriptTag('https://example.com/a.js', undefined, { manual: true });
await load();
unload();

Demo

Loading demo…

Signature

export function useScriptTag(
  src: MaybeRefOrGetter<string>,
  onLoaded: (el: HTMLScriptElement) => void = noop,
  options: UseScriptTagOptions ={ ... }

Parameters

Parameter	Type	Default	Description
`src`	`MaybeRefOrGetter<string>`	—	Reactive source URL for the script
`onLoaded`?	`(el: HTMLScriptElement) => void`	`noop`	Called when the script finishes loading
`options`?	`UseScriptTagOptions`	`{}`	Options

Returns

UseScriptTagReturn`{ scriptTag, load, unload }`