use
hook
The hook loads an external script tag in the browser. It allows React components to lazy-load third-party dependencies.
Anchor to propsProps
[src: string, options?: { module?: boolean; in?: "body" | "head"; }]LoadScriptParams
[src: string, options?: { module?: boolean; in?: "body" | "head"; }]Was this section helpful?
Example code
import React, {useEffect} from 'react';
import {useLoadScript} from '@shopify/hydrogen';
export default function Homepage() {
const scriptStatus = useLoadScript('https://some-cdn.com/some-script.js');
useEffect(() => {
if (scriptStatus === 'done') {
// do something
}
}, [scriptStatus]);
return <div>{scriptStatus === 'done' && <p>Script loaded!</p>}</div>;
}
examples
Example code
description
I am the default example
JavaScript
import React, {useEffect} from 'react'; import {useLoadScript} from '@shopify/hydrogen'; export default function Homepage() { const scriptStatus = useLoadScript('https://some-cdn.com/some-script.js'); useEffect(() => { if (scriptStatus === 'done') { // do something } }, [scriptStatus]); return <div>{scriptStatus === 'done' && <p>Script loaded!</p>}</div>; }TypeScript
import React, {useEffect} from 'react'; import {useLoadScript} from '@shopify/hydrogen'; export default function Homepage() { const scriptStatus = useLoadScript('https://some-cdn.com/some-script.js'); useEffect(() => { if (scriptStatus === 'done') { // do something } }, [scriptStatus]); return <div>{scriptStatus === 'done' && <p>Script loaded!</p>}</div>; }