LinguiJS

A readable, automated, and optimized (5 kb) internationalization for JavaSc...

ReactInternationalization i18n
lingui/js-linguilingui.js.org/@lingui/react

README

Linguijs


🌍📖 A readable, automated, and optimized (5 kb) internationalization for JavaScript


![Main Suite][Badge-MainSuite-GithubCI]
![Release Workflow Testing][Badge-ReleaseWorkflowTesting-GithubCI] [![Code Coverage][Badge-Coverage]][Coverage] [![PRs Welcome][Badge-PRWelcome]][PRWelcome] [![Backers on Open Collective][Badge-ocbackers]][ocbackers-local] [![Sponsors on Open Collective][Badge-ocsponsors]][ocsponsors-local] [![Join the community on Discord][Badge-Discord]][Discord]

[Documentation][Documentation] · [Documentation 2.x](https://js-lingui-git-stable-2x.lingui-js.vercel.app/) · [Quickstart](#quickstart) · [Example](#example) · [Support](#support) · [Contribute](#contribute) · [Licence](#licence)

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][RefCLI]. 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.9 kB gzipped][BundleCore],
  React components are an additional [3.1 kBs gzipped][BundleReact]. That's less than Redux
  for a full-featured intl library.

- Active community - Join us on [Discord][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


- [Create React App][TutorialSetupCRA]
- [React projects][TutorialSetupReact]

Tutorials


- [React][TutorialReact]
- [React Native][TutorialReactNative]
- [Plain JavaScript][TutorialJavaScript]
- [Working with Command Line Tool][TutorialCLI]

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

Example


Short example how i18n looks with JSX:

  1. ``` js
  2. import { Trans } from "@lingui/macro"

  4. function App() {
  5.   return (
  6.    <Trans id="msg.docs" /* id is optional */>
  7.      Read the <a href="https://lingui.js.org">documentation</a>
  8.      for more info.
  9.    </Trans>
  10.   )
  11. }
  12. ```

Message from this component will be extracted in following format:

  1. ```po
  2. msgid "msg.docs"
  3. msgstr "Read the <0>documentation</0> for more info."
  4. ```

For more example see the [React tutorial][TutorialReact].

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][Issues].

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][Issues]!
- Do you want to improve the docs and write some code?
  Read the [contributors guide][Contributing] and send a PR!

Contributors


This project exists thanks to all the people who contribute. [Contribute].
[![Contributors][Img-Contributors]][Contributors]

Backers


Thank you to all our backers! 🙏 [Become a backer]
[![Backers][Img-Backers]][Backers]

Sponsors


Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]


License


The project is licensed under the [MIT][License] license.

[ReactIntl]: https://github.com/yahoo/react-intl
[Documentation]: https://lingui.js.org/
[TutorialReact]: https://lingui.js.org/tutorials/react.html
[TutorialReactNative]: https://lingui.js.org/tutorials/react-native.html
[TutorialJavaScript]: https://lingui.js.org/tutorials/javascript.html
[TutorialCLI]: https://lingui.js.org/tutorials/cli.html
[TutorialSetupCRA]: https://lingui.js.org/tutorials/setup-cra.html
[TutorialSetupReact]: https://lingui.js.org/tutorials/setup-react.html
[RefCLI]: https://lingui.js.org/ref/cli.html

[Badge-MainSuite-GithubCI]: https://github.com/lingui/js-lingui/workflows/main-suite/badge.svg
[Badge-ReleaseWorkflowTesting-GithubCI]: https://github.com/lingui/js-lingui/workflows/release-workflow-test/badge.svg
[Badge-CI]: https://img.shields.io/circleci/project/github/lingui/js-lingui/main.svg
[Badge-AppVeyor]: https://ci.appveyor.com/api/projects/status/0wjdm3qofrjo2c4n/branch/main?svg=true
[Badge-Coverage]: https://img.shields.io/codecov/c/github/lingui/js-lingui/main.svg
[Badge-PRWelcome]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[Badge-ocbackers]: https://opencollective.com/js-lingui/backers/badge.svg
[Badge-Discord]: https://img.shields.io/discord/974702239358783608.svg?label=Discord&logo=Discord&colorB=7289da&style=flat-square
[Badge-ocsponsors]: https://opencollective.com/js-lingui/sponsors/badge.svg
[Img-Contributors]: https://opencollective.com/js-lingui/contributors.svg?width=890&button=false
[Contributors]: https://github.com/lingui/js-lingui/graphs/contributors
[Img-Backers]: https://opencollective.com/js-lingui/backers.svg?width=890
[Backers]: https://opencollective.com/js-lingui#backers

[CI]: https://circleci.com/gh/lingui/js-lingui/tree/main
[AppVeyor]: https://ci.appveyor.com/project/tricoder42/js-lingui/branch/main
[Coverage]: https://codecov.io/gh/lingui/js-lingui
[License]: https://github.com/lingui/js-lingui/blob/main/LICENSE
[Contributing]: https://github.com/lingui/js-lingui/blob/main/CONTRIBUTING.md
[Issues]: https://github.com/lingui/js-lingui/issues/new/choose
[PRWelcome]: http://makeapullrequest.com
[Indiegogo]: https://igg.me/at/js-lingui/x/4367619
[ocbackers-local]: #backers
[ocsponsors-local]: #sponsors
[BundleReact]: https://bundlephobia.com/result?p=@lingui/react
[BundleCore]: https://bundlephobia.com/result?p=@lingui/core
[Discord]: https://discord.gg/gFWwAYnMtA