useLocale

Client-side hook for reading and changing the current locale. Provides the active locale, all configured locales, and a function to switch locales.

Import

import { useLocale } from "catmint/i18n";

Signature

function useLocale(): LocaleState;
interface LocaleState {
  locale: string;
  locales: string[];
  setLocale: (locale: string) => void;
}

Return Value

PropertyTypeDescription
localestringThe current active locale (e.g. 'en', 'fr').
localesstring[]All locales configured in catmint.config.ts.
setLocale(locale: string) => voidNavigate to the same page in a different locale.

Examples

Language switcher

// LanguageSwitcher.client.tsx
import { useLocale } from "catmint/i18n";

function LanguageSwitcher() {
  const { locale, locales, setLocale } = useLocale();

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      {locales.map((loc) => (
        <option key={loc} value={loc}>
          {loc.toUpperCase()}
        </option>
      ))}
    </select>
  );
}

Conditional rendering by locale

// Greeting.client.tsx
import { useLocale } from "catmint/i18n";

function Greeting() {
  const { locale } = useLocale();

  return <p>{locale === "fr" ? "Bonjour!" : "Hello!"}</p>;
}

See Also