Change language

When a user changes the language, the library fetches the new languages and should automatically update the components and methods displaying translated text. With react-markdown, you need to force update with lastRefresh (check the documentation).

tip

The languages array below hardcodes every supported language code. If you'd rather drive your selector from the canonical list shipped with the SDK, import the AVAILABLE_LANGS constant: import { AVAILABLE_LANGS } from 'i18n-keyless-react'. See AVAILABLE_LANGS for details.

/src/components/LanguageSelector.tsx

import { useCurrentLanguage, setCurrentLanguage, useI18nKeyless, type Lang } from 'i18n-keyless-react';

const languages: Array<{ code: Lang; name: string; flag: string }> = [
  { code: 'en', name: 'English', flag: '🇺🇸' },
  { code: 'fr', name: 'Français', flag: '🇫🇷' },
  { code: 'es', name: 'Español', flag: '🇪🇸' },
  { code: 'pt', name: 'Português', flag: '🇵🇹' },
  { code: 'ar', name: 'العربية', flag: '🇸🇦' },
  { code: 'de', name: 'Deutsch', flag: '🇩🇪' },
  { code: 'it', name: 'Italiano', flag: '🇮🇹' },
  { code: 'ja', name: '日本語', flag: '🇯🇵' },
  { code: 'ko', name: '한국어', flag: '🇰🇷' },
  { code: 'nl', name: 'Nederlands', flag: '🇳🇱' },
  { code: 'pl', name: 'Polski', flag: '🇵🇱' },
  { code: 'ro', name: 'Română', flag: '🇷🇴' },
  { code: 'hu', name: 'Magyar', flag: '🇭🇺' },
  { code: 'ru', name: 'Русский', flag: '🇷🇺' },
  { code: 'sv', name: 'Svenska', flag: '🇸🇪' },
  { code: 'tr', name: 'Türkçe', flag: '🇹🇷' },
  { code: 'cn', name: '中文', flag: '🇨🇳' },
  { code: 'cz', name: 'Čeština', flag: '🇨🇿' },
];

export function LanguageSelector() {
  const currentLanguage = useCurrentLanguage();
  const primary = useI18nKeyless((store) => store.config.languages.primary);

  const handleLanguageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setCurrentLanguage(event.target.value as Lang);
  };

  return (
    <div className="flex items-center gap-2">
      <span className="text-lg">🌐</span>
      <select
        value={currentLanguage || primary}
        onChange={handleLanguageChange}
        className="focus:border-primary focus:ring-primary rounded-md border border-gray-300 px-2 py-1 text-sm focus:ring-1 focus:outline-none"
      >
        {languages.map((language) => (
          <option key={language.code} value={language.code}>
            {language.flag} {language.name}
          </option>
        ))}
      </select>
    </div>
  );
}