Lingui_js

Internationalization is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language.

--- W3C Web Internationalization FAQ

Lingui is an easy yet powerful internationalization framework for global projects.

• Clean and readable - Keep your code clean and readable, while the library uses battle-tested and powerful ICU MessageFormat under the hood.

• Universal - Use it everywhere. @lingui/core provides the essential intl functionality which works in any JavaScript project while @lingui/react offers components to leverage React rendering.

• Full rich-text support - Use React components inside localized messages without any limitation. Writing rich-text messages is as easy as writing JSX.

• Powerful tooling - Manage the whole intl workflow using Lingui CLI. It extracts messages from source code, validates messages coming from translators and checks that all messages are translated before shipping to production.

• Unopinionated - Integrate Lingui into your existing workflow. It supports message keys as well as auto-generated messages. Translations are stored either in JSON or standard PO files, which are supported in almost all translation tools.

• Lightweight and optimized - Core library is only 1.5 kB gzipped, React components are an additional 1.3 kBs gzipped. That's less than Redux for a full-featured intl library.

• Active community - Join us on Discord to discuss the latest development. At the moment, Lingui is the most active intl project on GitHub.

• Compatible with react-intl - Low-level React API is very similar to react-intl and the message format is the same. It's easy to migrate an existing project.

Quickstart

Install

• React projects
• Vite project

Tutorials

• React
• React Native
• Plain JavaScript
• Working with Command Line Tool

Plugins

• SWC Plugin
• Vite Plugin
• ESLint Plugin

If you're a react-intl user, check out a comparison of react-intl and Lingui.

Example

Short example how i18n looks with JSX:

import { Trans } from "@lingui/macro"

function App() {
  return (
   <Trans id="msg.docs" /* id is optional */>
     Read the <a href="https://lingui.dev">documentation</a>
     for more info.
   </Trans>
  )
}

Message from this component will be extracted in following format:

msgid "msg.docs"
msgstr "Read the <0>documentation</0> for more info."

For more example see the Examples directory.

Support

If you are having issues, please let us know.

• Join us on Discord to chat with the community.
• Ask questions on StackOverflow and mark it with Lingui tag.
• If something doesn't work as documented, documentation is missing or if you just want to suggest a new feature, create an issue.

Contribute

Contribution to open-source project is everything from spreading the word, writing documentation to implement features and fixing bugs.

• Do you use Lingui in production site? Let us know!
• Have you seen any interesting talk or article about i18n? Share it!
• Have you found a bug or do you want to suggest a new feature? Create an issue!
• Do you want to improve the docs and write some code? Read the contributors guide and send a PR!

Contributors

This project exists thanks to all the people who contribute. [Contribute].

License

The project is licensed under the MIT license.