@lingui/react

What is @lingui/react?

@lingui/react is a library for internationalization (i18n) in React applications. It provides tools to manage translations, pluralization, and formatting of messages, making it easier to support multiple languages in your app.

What are @lingui/react's main functionalities?

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>
  );
}

Other packages similar to @lingui/react

react-intl

react-intl is a popular library for internationalization in React applications. It provides components and an API to format dates, numbers, and strings, and to handle pluralization and translations. Compared to @lingui/react, react-intl has a larger community and more extensive documentation, but @lingui/react offers a more modern and flexible approach to message management.

i18next

i18next is a powerful internationalization framework that can be used with various JavaScript libraries, including React. It offers a wide range of features, such as language detection, interpolation, and pluralization. While i18next is more versatile and can be used outside of React, @lingui/react is specifically designed for React applications, making it easier to integrate and use within a React project.

react-i18next

react-i18next is a React binding for i18next, providing components and hooks to use i18next in React applications. It offers similar functionalities to @lingui/react, such as translation, pluralization, and context-based translations. However, @lingui/react has a more streamlined API and better integration with modern React features like hooks.

README

@lingui/react

React components for internationalization

@lingui/react is part of LinguiJS. See the documentation for all information, tutorials and examples.

Installation

npm install --save @lingui/react
# yarn add @lingui/react

Usage

See the tutorial or reference documentation.

License

MIT

Changelog

4.11.0 (2024-05-17)

Bug Fixes

• default message extraction (#1936) (8f1ddd7)
• exclude .scss files from extract-experimental build (#1935) (d01fa96)
• message-utils: correctly handle multi-digit complex argument cases (#1937) (47a0dde)

Features

• format-po: configure header attributes in PO file formatter (#1934) (d90f778)