LocaleSwitcher

Switches the language the storefront is read in, never the market. The current entry's link carries aria-current, so a renderLink must pass isCurrent on: React Aria drops aria-* from the menu item, which has data-current instead.

import { LocaleSwitcher } from "@evolve-storefront/layout/locale-switcher";

Preview

DefaultOpen in Storybook ↗

Usage

pickLocale lets the site decide, here always the first configured locale.

<LocaleSwitcher {...props} pickLocale={(candidates) => candidates[0]} />;

Props

Prop	Type	Description
locales	readonly string[]	The locales offered, in order. A language offered in several regions gets one entry.
locale	string	The one being read now.
href	string	Where switching leads, normally the current path. Required: a route's counterpart is a fact about the route, and a default would send every shopper home.
hrefs?	Partial<Record<string, string>>	This page's counterpart per locale, computed on the server — createAlternates(…).languages from @evolve-storefront/core/seo — so every entry has its real address from the first render. A locale without one uses href.
pickLocale?	LocalePicker	Which of a language's locales its entry switches to. Defaults to sameRegionOrFirst: the shopper's own region if it has the language.
renderLink?	((props: LocaleLinkRenderProps) => ReactNode)	Render an entry with the app's router; a plain <a href> without it. With next-intl that is its own Link, whose locale prop does the switching: next/link has no locale in the App Router.

Examples

Server AlternatesEach language's own address, from the server. hrefs carries the page's counterpart per locale — localized slugs included — so no entry waits for the browser to read the head's alternates, and none falls back to the homepage.

// In the page, from the same paths its metadata uses.
const { languages } = createAlternates({ routing, paths, locale });
<LocaleSwitcher locales={routing.locales} locale={locale} href={`/${locale}`} hrefs={languages} />;

Open in Storybook ↗