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 subscribe to the store and key the renderer by the resolved text (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: '🇨🇿' },
  { code: 'el', name: 'Ελληνικά', 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>
  );
}