@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 documenation.

License

MIT

Changelog

3.11.0 (2021-09-07)

Bug Fixes

• 'compile --watch' not watching for correct file based on format (#1088) (ab68c06)
• add extract-template for po-gettext format (#1089) (ea00f55)
• country-coded language breaks plurals with po-gettext (#1131) (6b60b8a)
• extractors CLI validation and accept require and require.resolve (#1126) (c50a06e)
• fallbackLocales to false causing unexpected behaviour (#1123) (60e3952)
• fix testing suite #1098 (1144cc7)
• keys with leading number was generating bad object keys (#1127) (8bb2983)
• no files being found when catalogs.include has more than one entry (#1108) (04efd85)
• sideEffects to false for shrinking bundle size (#1129) (57cd2e5)
• unicode chars were removed from .po files when extracting (#1125) (d688329)
• wrong detect whether a translation is plural (#1119) (48b6644)

Features

• Add debounce option to compile and extract CLI (#1101) (a13334c)
• Cloud service providers & Translation.io (#1107) (cbc87b5)