Shopify Providercomponent
The component wraps your entire app and provides functionality for many components, hooks, and utilities. The
component also provides localization data for the app. You should place it in your app's entry point component.
Anchor to propsProps
- Anchor to countryIsoCodecountryIsoCodeCountryCoderequired
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
enum, it might be considered a subdivision of another country. For example, the territories associated with Spain are represented by the country code
, and the territories associated with the United States of America are represented by the country code
.
- Anchor to languageIsoCodelanguageIsoCodeLanguageCoderequired
language codes supported by Shopify.
- Anchor to storeDomainstoreDomainstringrequired
The full domain of your Shopify storefront URL (eg: the complete string of
{subdomain}.myshopify.com
).- Anchor to storefrontApiVersionstorefrontApiVersionstringrequired
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 for more details.
- Anchor to storefrontTokenstorefrontTokenstringrequired
The Storefront API public access token. Refer to the authentication documentation for more details.
- Anchor to childrenchildrenReactNode
React children to render.
- Anchor to storefrontIdstorefrontIdstring
The globally-unique identifier for the Shop
ShopifyProviderProps
Shopify-specific values that are used in various Hydrogen React components and hooks.
- children
React children to render.
ReactNode
- 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`.
CountryCode
- languageIsoCode
`ISO 369` language codes supported by Shopify.
LanguageCode
- storeDomain
The full domain of your Shopify storefront URL (eg: the complete string of `{subdomain}.myshopify.com`).
string
- 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.
string
- storefrontId
The globally-unique identifier for the Shop
string
- storefrontToken
The Storefront API public access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details.
string
export interface ShopifyProviderProps extends ShopifyProviderBase {
/** React children to render. */
children?: ReactNode;
}
Example code
examples
Example code
description
I am the default example
JavaScript
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> </> ); }
TypeScript
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> </> ); }