Guide for the Shopify Hydrogen Hooks

Shopify Hydrogen is react based framework that allow developer to create custom storefront with the collection of prebuild ready to use components.

Shopping cart , Variation Picker and content Galley these are examples of the prebuild component available in the Shopify Hydrogen.

As we know that Shopify Hydrogen is react based framework , similary the way hooks work in the reactjs, Hydrogen Hooks works similary manner , It hooks the feature in the React functional component.

Hydrogen has two api versions available
1. 2023-07
2. 2023-04.

On its version of 2023-7 now it supports one more new hook which is useLoadScript() hook. it helps in the lazy load of third party dependencies.

Shopify Hydrogen mainly support the three hooks in its 2023-7 version
1. useLoadScript()
2. useMoney()
3. useShopifyCookies()

useLoadScript()
useLoadScript() helps in the load external script tag in the browser.
It allows developers to lazy load the third party dependecies in their React Component.

import React, {useEffect} from 'react';
import {useLoadScript} from '@shopify/hydrogen';

export default function App() {
  const loadStatus = useLoadScript('https://some-cdn.com/some-script.js');

  useEffect(() => {
    if (loadStatus === 'done') {
      // your code goes here 
    }
  }, [scriptStatus]);

  return (
      <>
     {loadStatus === "done" ? <h1> Script Loaded SuccessFully !! </h1 : 
       <h1> Script Loading !!</h1>
      </>
    )
}

useMoney()

useMoney() hook return the default-formatted string of given amount with currency indicator. It usually takes the MoneyV2 object as parameter.

import {useMoney, ShopifyProvider} from '@shopify/hydrogen';
export function App() {
 const myMoney = {amount: '100', currencyCode: 'USD'}; // MoneyV2 object.
  return (
    <ShopifyProvider languageIsoCode="EN" countryIsoCode="US">
      <UsingMoney myMoney = {myMoney} />
    </ShopifyProvider>
  );
}
function UsingMoney({myMoney) {
  const money = useMoney(myMoney);
  return (
    <>
      <h1>Your money: {money.localizedString}</h1>
      <h1>Currency Name : {money.currencyName}</h1>
    </>
  );
}

useShopifyCookies()

This hooks is help in the setting the Shopify user session cookies and as a developer you can manipulate the cookie as per the need. It helps in the authentication of the headless app.

import * as React from 'react';
import {useShopifyCookies} from '@shopify/hydrogen';
export default function App({Component, pageProps}) {
  useShopifyCookies({hasUserConsent: false});
  return <Component {...pageProps} />;
}

Thanks for Reading , If you want to know more about the Shopify Hydrogen Hooks pls visiti their offical documentation , doc link.
Happy Coding !!