useScript

Loads an external script into the <body> and exposes a loading signal. Guarantees the same src is never injected more than once by generating a deterministic id from the URL.

When to use

✅ Use when…	🚫 Avoid when…
To integrate third-party widgets (maps, players, captchas, analytics) that require a `<script>` loaded at runtime. When you need to wait for the script to be ready before initializing a component.	For JS modules that can be imported via the bundler — prefer `import`. For scripts that must load in the `<head>` before React mounts (use the static tag in the HTML).

Signature

const { isLoadingScript } = useScript({ src: string });

Example

import { useScript } from '@apollion-dsi/core/hooks';
 
function MapWidget() {
  const { isLoadingScript } = useScript({ src: 'https://example.com/widget.js' });
 
  if (isLoadingScript) return <p>Loading…</p>;
 
  return <div id="widget" />;
}

useScript

When to use

Signature

Example

See also