react-i18next

Translation

This feature allows you to translate text in your React components using the `t` function provided by the `useTranslation` hook.

import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();
  return <p>{t('keyForTranslation')}</p>;
}

Language Switching

This feature enables you to switch languages on the fly within your application by calling the `changeLanguage` method.

import { useTranslation } from 'react-i18next';

function ChangeLanguageButton() {
  const { i18n } = useTranslation();
  return (
    <button onClick={() => i18n.changeLanguage('de')}>Change to German</button>
  );
}

Pluralization

This feature allows you to handle plural forms in translations depending on the count provided.

import { useTranslation } from 'react-i18next';

function MyComponent({ count }) {
  const { t } = useTranslation();
  return <p>{t('keyForPlural', { count })}</p>;
}

Formatting

This feature allows you to format dates, numbers, and other values within your translations.

import { useTranslation } from 'react-i18next';

function MyComponent({ date, number }) {
  const { t } = useTranslation();
  return (
    <div>
      <p>{t('formattedDate', { date })}</p>
      <p>{t('formattedNumber', { number })}</p>
    </div>
  );
}

Namespaces

This feature allows you to organize your translations into namespaces, making it easier to manage large translation files.

import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation('namespace1');
  return <p>{t('namespace1:keyForTranslation')}</p>;
}