@lingui/react

Translation

This feature allows you to translate text in your React application. The `Trans` component is used to display translated messages based on the active locale.

import { I18nProvider, Trans } from '@lingui/react';
import { i18n } from '@lingui/core';
import { messages } from './locales/en/messages';

i18n.load('en', messages);
i18n.activate('en');

function App() {
  return (
    <I18nProvider i18n={i18n}>
      <Trans id="hello" />
    </I18nProvider>
  );
}

Pluralization

This feature handles pluralization of messages. The `Plural` component allows you to display different messages based on the count of items.

import { I18nProvider, Plural } from '@lingui/react';
import { i18n } from '@lingui/core';
import { messages } from './locales/en/messages';

i18n.load('en', messages);
i18n.activate('en');

function App() {
  const itemCount = 5;
  return (
    <I18nProvider i18n={i18n}>
      <Plural
        value={itemCount}
        one="{itemCount} item"
        other="{itemCount} items"
      />
    </I18nProvider>
  );
}

Message Formatting

This feature allows you to format messages with dynamic values. The `Trans` component can take a `values` prop to insert dynamic content into the translated message.

import { I18nProvider, Trans } from '@lingui/react';
import { i18n } from '@lingui/core';
import { messages } from './locales/en/messages';

i18n.load('en', messages);
i18n.activate('en');

function App() {
  const userName = 'John';
  return (
    <I18nProvider i18n={i18n}>
      <Trans id="welcome" values={{ name: userName }} />
    </I18nProvider>
  );
}