useCurrentLanguage()

The useCurrentLanguage hook returns the currently selected language for the i18n-keyless system. This hook is essential for building language selectors and managing language-dependent UI behavior.

Function Signature

useCurrentLanguage(): Lang | null

Return Value

Lang | null

type: Lang | null

Returns the currently selected language code, or null if no language has been explicitly set. The Lang type includes all supported languages: "fr" | "en" | "nl" | "it" | "de" | "es" | "pl" | "pt" | "ro" | "hu" | "sv" | "tr" | "ja" | "cn" | "ru" | "ko" | "ar" | "cz".

Basic Usage

Language Selector

import { useCurrentLanguage, setCurrentLanguage, 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: '🇪🇸' },
];

export function LanguageSelector() {
  const currentLanguage = useCurrentLanguage();

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

  return (
    <select value={currentLanguage || 'en'} onChange={handleLanguageChange}>
      {languages.map((language) => (
        <option key={language.code} value={language.code}>
          {language.flag} {language.name}
        </option>
      ))}
    </select>
  );
}

With Fallback

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

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

  return (
    <div>
      Current language: {displayLanguage}
    </div>
  );
}

Conditional Rendering

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

export function ConditionalContent() {
  const currentLanguage = useCurrentLanguage();

  if (currentLanguage === 'ar') {
    return <div style={{ direction: 'rtl' }}>Arabic content</div>;
  }

  return <div>Default content</div>;
}

Common Use Cases

• Language selectors: Building dropdown menus or buttons to switch languages
• Conditional rendering: Showing different content based on the current language
• RTL support: Applying right-to-left styling for Arabic language
• Language-specific formatting: Adjusting date, number, or currency formats
• Analytics: Tracking which languages users prefer

Notes

• Returns null when no language has been explicitly set by the user
• Commonly paired with setCurrentLanguage() for language switching functionality
• Use with useI18nKeyless((store) => store.config.languages.primary) to get a fallback value
• Must be used within a React component (it's a hook)
• The returned language code corresponds to the user's selection, not necessarily the primary language