setCurrentLanguage()

The setCurrentLanguage function allows you to programmatically change the active language in your i18n-keyless application. When called, it updates the language state and triggers a re-render of all components using translated text.

Function Signature

setCurrentLanguage(language: Lang): void

Parameters

language

type: Lang (required)

The language code to set as the current language. Must be one of one of the 48 Lang codes — "fr", "en", "es", "zh-Hans", "pt-BR", and so on.

Basic Usage

Language Selector

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

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

  return (
    <select onChange={handleLanguageChange}>
      <option value="en">English</option>
      <option value="fr">Français</option>
      <option value="es">Español</option>
    </select>
  );
}

Language Buttons

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

export function LanguageButtons() {
  const handleLanguageChange = (languageCode: Lang) => {
    setCurrentLanguage(languageCode);
  };

  return (
    <div>
      <button onClick={() => handleLanguageChange('en')}>
        🇺🇸 English
      </button>
      <button onClick={() => handleLanguageChange('fr')}>
        🇫🇷 Français
      </button>
      <button onClick={() => handleLanguageChange('es')}>
        🇪🇸 Español
      </button>
    </div>
  );
}

Programmatic Usage

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

export function MyComponent() {
  useEffect(() => {
    // Set language based on user preference
    const userLanguage = localStorage.getItem('userLanguage');
    if (userLanguage) {
      setCurrentLanguage(userLanguage as Lang);
    }
  }, []);

  return <div>My Component</div>;
}

Common Use Cases

• Language selectors: Switching languages via dropdowns or button groups
• User preferences: Setting language based on saved user preferences
• URL-based routing: Changing language based on URL parameters
• Automatic detection: Setting language based on browser locale
• Reset functionality: Reverting to a default language

Notes

• Triggers an immediate re-render of all components using i18n-keyless
• The language change persists according to your storage configuration
• Must use a valid Lang type - invalid language codes will be ignored
• Can be called from anywhere in your React application (not a hook)
• Commonly paired with useCurrentLanguage() for building language controls