Choose a version:

useShop
hook

Provides access to the shopifyConfig prop of <ShopifyProvider/>.

Anchor to useShop
useShop()

useShop must be a descendent of a ShopifyProvider component.

Anchor to useShop-returnsReturns

ShopifyContextValue

countryIsoCode CountryCode: 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.
getPublicTokenHeaders (props: ) => Record<string, string>: Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This uses the public Storefront API token.

By default, it will use the config you passed in when creating <ShopifyProvider/>. However, you can override the following settings on each invocation of getPublicTokenHeaders({...}):

contentType

storefrontToken
getShopifyDomain (props?: ) => string: Creates the fully-qualified URL to your myshopify.com domain.

By default, it will use the config you passed in when calling <ShopifyProvider/>. However, you can override the following settings on each invocation of getShopifyDomain({...}):

storeDomain
getStorefrontApiUrl (props?: ) => string: Creates the fully-qualified URL to your store's GraphQL endpoint.

By default, it will use the config you passed in when creating <ShopifyProvider/>. However, you can override the following settings on each invocation of getStorefrontApiUrl({...}):

storeDomain

storefrontApiVersion
languageIsoCode LanguageCode: ISO 369 language codes supported by Shopify.
storeDomain string: The full domain of your Shopify storefront URL (eg: the complete string of {subdomain}.myshopify.com).
storefrontApiVersion string: 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.
storefrontToken string: The Storefront API public access token. Refer to the authentication documentation for more details.
storefrontId string: The globally-unique identifier for the Shop

UseShopGeneratedType

Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`. Must be a descendent of `<ShopifyProvider/>`.

ShopifyContextValue

ShopifyContextValue

export function useShop(): ShopifyContextValue {
  const shopContext = useContext(ShopifyContext);
  if (!shopContext) {
    throw new Error(`'useShop()' must be a descendent of <ShopifyProvider/>`);
  }
  return shopContext;
}

ShopifyContextValue

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
```
getPublicTokenHeaders
Returns an object that contains headers that are needed for each query to Storefront API GraphQL endpoint. This uses the public Storefront API token. By default, it will use the config you passed in when creating `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getPublicTokenHeaders({...})`: - `contentType` - `storefrontToken`
```
(props: GetPublicTokenHeadersProps) => Record<string, string>
```
getShopifyDomain
Creates the fully-qualified URL to your myshopify.com domain. By default, it will use the config you passed in when calling `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getShopifyDomain({...})`: - `storeDomain`
```
(props?: GetShopifyDomainProps) => string
```
getStorefrontApiUrl
Creates the fully-qualified URL to your store's GraphQL endpoint. By default, it will use the config you passed in when creating `<ShopifyProvider/>`. However, you can override the following settings on each invocation of `getStorefrontApiUrl({...})`: - `storeDomain` - `storefrontApiVersion`
```
(props?: GetStorefrontApiUrlProps) => string
```
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 ShopifyContextValue
  extends ShopifyProviderBase,
    ShopifyContextReturn {}

GetPublicTokenHeadersProps

contentType
Customizes which `"content-type"` header is added when using `getPrivateTokenHeaders()` and `getPublicTokenHeaders()`. When fetching with a `JSON.stringify()`-ed `body`, use `"json"`. When fetching with a `body` that is a plain string, use `"graphql"`. Defaults to `"json"`
```
'json' | 'graphql'
```
storefrontToken
The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details.
```
string
```

{
  /**
   * Customizes which `"content-type"` header is added when using `getPrivateTokenHeaders()` and `getPublicTokenHeaders()`. When fetching with a `JSON.stringify()`-ed `body`, use `"json"`. When fetching with a `body` that is a plain string, use `"graphql"`. Defaults to `"json"`
   */
  contentType: 'json' | 'graphql';
  /** The Storefront API access token. Refer to the [authentication](https://shopify.dev/api/storefront#authentication) documentation for more details. */
  storefrontToken?: string;
}

GetShopifyDomainProps

storeDomain
```
string
```

{storeDomain?: string}

GetStorefrontApiUrlProps

storeDomain
The host name of the domain (eg: `{shop}.myshopify.com`).
```
string
```
storefrontApiVersion
The Storefront API version. This should almost always be the same as the version Hydrogen-UI was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details.
```
string
```

{
  /** The host name of the domain (eg: `{shop}.myshopify.com`). */
  storeDomain?: string;
  /** The Storefront API version. This should almost always be the same as the version Hydrogen-UI was built for. Learn more about Shopify [API versioning](https://shopify.dev/api/usage/versioning) for more details. */
  storefrontApiVersion?: string;
}

Was this section helpful?

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"

</ShopifyProvider>

);

}

export function UsingUseShop() {

const shop = useShop();

return (

<div>{shop.storeDomain}</div>

<div>{shop.storefrontToken}</div>

<div>{shop.storefrontApiVersion}</div>

</>

);

}

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