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?: LoadScriptOptions]Anchor to LoadScriptOptions
LoadScriptOptions
- Anchor to attributesattributesRecord<string, string>
- 'head' | 'body'
- Anchor to modulemoduleboolean
LoadScriptParams
[src: string, options?: LoadScriptOptions]LoadScriptOptions
- attributes
Record<string, string> - in
'head' | 'body' - module
boolean
{
module?: boolean;
in?: 'head' | 'body';
attributes?: Record<string, string>;
}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>; }