Skip to main content

​
useLanguage

The useLanguage hook provides access to internationalization features, allowing you to translate content and switch between languages in your application.

​
Import

import { useLanguage } from '@/hooks';

​
Signature

const { t, i18n, language, changeLanguage } = useLanguage();

​
Return Value

The hook returns an object with the following properties:
​
t
function
required
Translation function that accepts a translation key and returns the translated string.
t('key.to.translation')
​
i18n
object
required
The i18next instance providing full access to the internationalization API.
​
language
string
required
The currently active language code (e.g., ‘en’, ‘es’, ‘fr’).
​
changeLanguage
(lng: string) => Promise<void>
required
Function to change the application language. Accepts a language code as parameter.
changeLanguage('es')

​
Usage

​
Basic Translation

import { useLanguage } from '@/hooks';

function WelcomeMessage() {
  const { t } = useLanguage();
  
  return (
    <div>
      <h1>{t('welcome.title')}</h1>
      <p>{t('welcome.description')}</p>
    </div>
  );
}

​
Language Switcher

import { useLanguage } from '@/hooks';

function LanguageSwitcher() {
  const { language, changeLanguage } = useLanguage();
  
  return (
    <select 
      value={language} 
      onChange={(e) => changeLanguage(e.target.value)}
    >
      <option value="en">English</option>
      <option value="es">Español</option>
      <option value="fr">Français</option>
    </select>
  );
}

​
Accessing Current Language

import { useLanguage } from '@/hooks';

function LocaleDisplay() {
  const { language, i18n } = useLanguage();
  
  return (
    <div>
      <p>Current language: {language}</p>
      <p>Available languages: {i18n.languages.join(', ')}</p>
    </div>
  );
}
This hook wraps react-i18next’s useTranslation hook, providing a consistent API for language management across BoxApp.

Build docs developers (and LLMs) love

Get started for freeTalk to us