useScriptTag

Script tag injecting

Usage

Live Editor

// it's an example, use your types instead

// Add this if you are using TypeScript
// declare const jQuery: any;
function Demo() {
  const [, status] = useScriptTag(
    "https://code.jquery.com/jquery-3.5.1.min.js",
  );

  const [version, setVersion] = useState(0);
  useEffect(() => {
    if (typeof jQuery !== "undefined") {
      setVersion(jQuery.fn.jquery);
    }
  }, [status]);

  return <div>jQuery version: {version}</div>;
};

Result

Loading...

API

useScriptTag

Returns

readonly [HTMLScriptElement | null, UseScriptTagStatus, (waitForScriptLoad?: boolean | undefined) => Promise<boolean | HTMLScriptElement>, () => void]: A tuple with the following elements:

• html element used to load resources.
• Resource loading status.
• Resource loading function.
• Resource unloading function

Arguments

Argument	Description	Type	DefaultValue
src	source	string (Required)	-
onLoaded	source loaded callback	((el: HTMLScriptElement) => void) | undefined	-
options	optional params	UseScriptTagOptions | undefined	-

UseScriptTagOptions

Property	Description	Type	DefaultValue
immediate	Load the script immediately	boolean	true
async	Add async attribute to the script tag	boolean	true
type	Script type	string	'text/javascript'
manual	Manual controls the timing of loading and unloading	boolean	false
crossOrigin	cross origin	'anonymous' | 'use-credentials'	-
referrerPolicy	referrer policy	| 'no-referrer'| 'no-referrer-when-downgrade'| 'origin'| 'origin-when-cross-origin'| 'same-origin'| 'strict-origin'| 'strict-origin-when-cross-origin'| 'unsafe-url'	-
noModule	Add noModule attribute to the script tag	boolean	-
defer	Add defer attribute to the script tag	boolean	-
attrs	Add custom attribute to the script tag	Record<string, string>	-

UseScriptTagStatus

Type

export type UseScriptTagStatus = 'idle' | 'loading' | 'ready' | 'error'