---
title: useShop
description: Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`.
api_version: 2024-07
api_name: hydrogen-react
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen-react/2024-07/hooks/useshop'
  md: 'https://shopify.dev/docs/api/hydrogen-react/2024-07/hooks/useshop.md'
---

# use​Shophook

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

## use​Shop()

`useShop` must be a descendent of a `ShopifyProvider` component.

### Returns

* ShopifyContextValue

  ### 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: GetPublicTokenHeadersProps) => 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?: GetShopifyDomainProps) => 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?: GetStorefrontApiUrlProps) => 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](https://shopify.dev/api/usage/versioning) for more details.

  * storefrontToken

    string

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

  * storefrontId

    string

    The globally-unique identifier for the Shop

### 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\`.

  ```ts
  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\`

  ```ts
  (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\`

  ```ts
  (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\`

  ```ts
  (props?: GetStorefrontApiUrlProps) => string
  ```

* languageIsoCode

  \`ISO 369\` language codes supported by Shopify.

  ```ts
  LanguageCode
  ```

* storeDomain

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

  ```ts
  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.

  ```ts
  string
  ```

* storefrontId

  The globally-unique identifier for the Shop

  ```ts
  string
  ```

* storefrontToken

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

  ```ts
  string
  ```

```ts
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"\`

  ```ts
  'json' | 'graphql'
  ```

* storefrontToken

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

  ```ts
  string
  ```

```ts
{
  /**
   * 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

  ```ts
  string
  ```

```ts
{storeDomain?: string}
```

### GetStorefrontApiUrlProps

* storeDomain

  The host name of the domain (eg: \`{shop}.myshopify.com\`).

  ```ts
  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.

  ```ts
  string
  ```

```ts
{
  /** 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;
}
```

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  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

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

## Related

[- ShopifyProvider](https://shopify.dev/api/hydrogen-react/components/ShopifyProvider)