getSupportedLanguages()

The getSupportedLanguages function returns the array of supported languages configured in your i18n-keyless application. This function is useful for building dynamic language selectors or checking if a specific language is supported.

Function Signature

getSupportedLanguages(): Lang[]

Return Value

Lang[]

type: Lang[]

Returns an array of supported language codes as configured during initialization. The Lang type includes all possible languages: "fr" | "en" | "nl" | "it" | "de" | "es" | "pl" | "pt" | "ro" | "hu" | "sv" | "tr" | "ja" | "cn" | "ru" | "ko" | "ar" | "cz".

Basic Usage

Dynamic Language Selector

import { getSupportedLanguages, setCurrentLanguage } from 'i18n-keyless-react';

const languageNames = {
  en: 'English',
  fr: 'Français', 
  es: 'Español',
  de: 'Deutsch',
  it: 'Italiano'
  // ... other languages
};

export function LanguageSelector() {
  const supportedLanguages = getSupportedLanguages();

  return (
    <select onChange={(e) => setCurrentLanguage(e.target.value as Lang)}>
      {supportedLanguages.map((lang) => (
        <option key={lang} value={lang}>
          {languageNames[lang] || lang}
        </option>
      ))}
    </select>
  );
}

Language Support Check

import { getSupportedLanguages } from 'i18n-keyless-react';

export function LanguageChecker() {
  const supportedLanguages = getSupportedLanguages();
  
  const isLanguageSupported = (lang: string) => {
    return supportedLanguages.includes(lang as Lang);
  };

  return (
    <div>
      <p>French supported: {isLanguageSupported('fr') ? 'Yes' : 'No'}</p>
      <p>Chinese supported: {isLanguageSupported('cn') ? 'Yes' : 'No'}</p>
    </div>
  );
}

Conditional Features

import { getSupportedLanguages } from 'i18n-keyless-react';

export function ConditionalFeatures() {
  const supportedLanguages = getSupportedLanguages();
  
  const hasRTLLanguages = supportedLanguages.includes('ar');
  const isMultilingual = supportedLanguages.length > 1;

  return (
    <div>
      {isMultilingual && (
        <div>Multiple languages available</div>
      )}
      {hasRTLLanguages && (
        <div>RTL support enabled</div>
      )}
    </div>
  );
}

Common Use Cases

• Dynamic language selectors: Building dropdowns that only show available languages
• Feature flags: Enabling/disabling features based on supported languages
• Validation: Checking if a language is supported before setting it
• Analytics: Tracking which languages are configured for the application
• Configuration display: Showing users what languages are available

getSupportedLanguages vs AVAILABLE_LANGS

getSupportedLanguages() returns only the languages your project enabled in init({ languages: { supported: [...] } }). If you want the full list of every language i18n-keyless can translate to (regardless of your config), import the AVAILABLE_LANGS constant instead:

import { AVAILABLE_LANGS } from 'i18n-keyless-react';

// All 18 languages i18n-keyless supports, ready to spread into init({ supported })
console.log(AVAILABLE_LANGS);

Notes

• Returns the exact array configured in I18nKeyless.init({ languages: { supported: [...] } })
• The array reflects the languages configured at initialization time
• Can be called from anywhere in your React application (not a hook)
• Useful for building dynamic interfaces that adapt to your language configuration
• The order of languages in the array matches the order specified during initialization
• For the full set of available language codes (not just the ones enabled in your project), use AVAILABLE_LANGS