ShopifyProvider

The `ShopifyProvider` component wraps your entire app and provides functionality for many components, hooks, and utilities. The `ShopifyProvider` component also provides localization data for the app. You should place it in your app's entry point component.

Example code

import {ShopifyProvider, useShop} from '@shopify/hydrogen-react';

export default function App() {
  return (
    <ShopifyProvider
      storeDomain="my-store"
      storefrontToken="abc123"
      storefrontApiVersion="2022-10"
      countryIsoCode="CA"
      languageIsoCode="EN"
    >
      <UsingUseShop />
    </ShopifyProvider>
  );
}

export function UsingUseShop() {
  const shop = useShop();

  return (
    <>
      <div>{shop.storeDomain}</div>
      <div>{shop.storefrontToken}</div>
      <div>{shop.storefrontApiVersion}</div>
    </>
  );
}

import {ShopifyProvider, useShop} from '@shopify/hydrogen-react';

export default function App() {
  return (
    <ShopifyProvider
      storeDomain="my-store"
      storefrontToken="abc123"
      storefrontApiVersion="2022-10"
      countryIsoCode="CA"
      languageIsoCode="EN"
    >
      <UsingUseShop />
    </ShopifyProvider>
  );
}

export function UsingUseShop() {
  const shop = useShop();

  return (
    <>
      <div>{shop.storeDomain}</div>
      <div>{shop.storefrontToken}</div>
      <div>{shop.storefrontApiVersion}</div>
    </>
  );
}

Props

ShopifyProviderProps

Shopify-specific values that are used in various Hydrogen React components and hooks.

children

React children to render.

countryIsoCode

The code designating a country, which generally follows ISO 3166-1 alpha-2 guidelines. If a territory doesn't have a country code value in the `CountryCode` enum, it might be considered a subdivision of another country. For example, the territories associated with Spain are represented by the country code `ES`, and the territories associated with the United States of America are represented by the country code `US`.

languageIsoCode

`ISO 369` language codes supported by Shopify.

storeDomain

The full domain of your Shopify storefront URL (eg: the complete string of `{subdomain}.myshopify.com`).

storefrontApiVersion

The Storefront API version. This should almost always be the same as the version Hydrogen React was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.

storefrontId

The globally-unique identifier for the Shop

storefrontToken

The Storefront API public access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details.

useShop