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.
![Downloads](https://img.shields.io/npm/dw/@lingui/react.svg)
@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
Usage
See the tutorial or reference documentation.
License
MIT