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
limit
numberRequiredThe limit applied on the retrieved items.
offset
numberRequiredThe number of items skipped before retrieving the list of items.
count
numberRequiredThe total count of items.
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
id
stringRequiredThe region's ID.
Query Returned Data
Region details.
Was this section helpful?