Choose a version:

useLoadScript

The useLoadScript 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>: Construct a type with a set of properties K of type T
Anchor to in in 'head' | 'body'
Anchor to module module boolean

Examples

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

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>;
}

Was this page helpful?