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 attributes
attributes
Record<string, string>
'head' | 'body'
Anchor to module
module
boolean
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>;
}