Locales (React)

Use useLocale() to read the current language and switch it from UI. The language is page-wide — the same for every client.

See Locales (Core) for setLocale, preloadLocales, setTranslator, and session language.

import { useLocale } from '@swapped/connect-sdk/react'
import { SUPPORTED_LOCALES } from '@swapped/connect-sdk/locales'

function LanguageSelect() {
  const { locale, setLocale, isLoading } = useLocale()

  return (
    <select
      value={locale}
      disabled={isLoading}
      onChange={event => {
        void setLocale(event.target.value)
      }}
    >
      {SUPPORTED_LOCALES.map(code => (
        <option key={code} value={code}>
          {code}
        </option>
      ))}
    </select>
  )
}

isLoading is true while the selected language is still loading. English is always available, so the first paint is never empty.

You can also call setLocale from @swapped/connect-sdk/locales outside React — the hook will pick up the change.