Skip to main content
Skip to main content

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

limitnumberRequired
The limit applied on the retrieved items.
offsetnumberRequired
The number of items skipped before retrieving the list of items.
countnumberRequired
The total count of items.
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.
Was this section helpful?