Regions

Queries listed here are used to send requests to the Store Region API Routes.

Regions are different countries or geographical regions that the commerce store serves customers in. Customers can choose what region they're in, which can be used to change the prices shown based on the region and its currency.

Related Guide: How to use regions in a storefront.

Queries

useRegions

This hook retrieves a list of regions. This hook is useful to show the customer all available regions to choose from.

Example

import React from "react"
import { useRegions } from "medusa-react"

const Regions = () => {
  const { regions, isLoading } = useRegions()

  return (
    <div>
      {isLoading && <span>Loading...</span>}
      {regions?.length && (
        <ul>
          {regions.map((region) => (
            <li key={region.id}>
              {region.name}
            </li>
          ))}
        </ul>
      )}
    </div>
  )
}

export default Regions

Query Returned Data

regionsRegion[]Required

An array of regions details.

useRegion

This hook retrieves a Region's details.

Example

import React from "react"
import { useRegion } from "medusa-react"

type Props = {
  regionId: string
}

const Region = ({ regionId }: Props) => {
  const { region, isLoading } = useRegion(
    regionId
  )

  return (
    <div>
      {isLoading && <span>Loading...</span>}
      {region && <span>{region.name}</span>}
    </div>
  )
}

export default Region

Hook Parameters

idstringRequired

The region's ID.

Query Returned Data

regionRegionRequired

Region details.