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 one of the 48 Lang codes — "fr", "en", "es", "zh-Hans", "pt-BR", and so on.

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

• Under a <I18nKeylessProvider> (SSR) it returns the provider's language — the language the subtree renders in, on the server and on the client alike (≥ 3.3.0). Without one, the store's
• 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