JavaScript TypeScript Shell
Switch branches/tags
v2.3.0 v2.2.0 v2.1.2 v2.1.1 v2.1.0 v2.0.8 v2.0.7 v2.0.6 v2.0.5 v2.0.4 v2.0.3 v2.0.2 v2.0.1 v2.0.0 v2.0.0-5 v2.0.0-4 v2.0.0-3 v2.0.0-2 v2.0.0-1 v2 react-trans@v0.2.0 react-trans@v0.1.0 react-redux-form@0.0.2 react-redux-form@0.0.1 lingui-react@1.4.1 lingui-react@1.4.0 lingui-react@1.3.6 lingui-react@1.3.5 lingui-react@1.3.4 lingui-react@1.3.3 lingui-react@1.3.2 lingui-react@1.3.1 lingui-react@1.3.0 lingui-react@1.2.1 lingui-react@1.2.0 lingui-react@1.1.2 lingui-react@1.1.1 lingui-react@1.1.0 lingui-react@1.1.0-1 lingui-react@1.1.0-0 lingui-react@1.0.4 lingui-react@1.0.3 lingui-react@1.0.2 lingui-react@1.0.1 lingui-react@1.0.0 lingui-react@0.12.5 lingui-react@0.12.2 lingui-react@0.12.1 lingui-react@0.12.0 lingui-react@0.7.0 lingui-react@0.6.0 lingui-react@0.5.1 lingui-react@v0.11.0 lingui-react@v0.10.0 lingui-react@v0.8.0 lingui-react@v0.5.0 lingui-react@v0.4.0 lingui-react@v0.3.1 lingui-react@v0.3.0 lingui-loader@0.1.4 lingui-loader@0.1.3 lingui-loader@0.1.2 lingui-loader@0.1.1 lingui-loader@0.1.0 lingui-i18n@1.3.3 lingui-i18n@1.3.2 lingui-i18n@1.3.1 lingui-i18n@1.3.0 lingui-i18n@1.2.4 lingui-i18n@1.2.3 lingui-i18n@1.2.2 lingui-i18n@1.2.2-0 lingui-i18n@1.2.1 lingui-i18n@1.2.0 lingui-i18n@1.1.0 lingui-i18n@1.0.1 lingui-i18n@1.0.0 lingui-i18n@0.6.6 lingui-i18n@0.6.3 lingui-i18n@0.5.0 lingui-i18n@0.4.1 lingui-i18n@v0.6.1 lingui-i18n@v0.6.0 lingui-i18n@v0.4.0 lingui-i18n@v0.3.0 lingui-i18n@v0.2.2 lingui-i18n@v0.2.1 lingui-i18n@v0.2.0 lingui-i18n@v0.1.0 lingui-formats@1.0.3 lingui-formats@1.0.2 lingui-formats@1.0.1 lingui-formats@1.0.0 lingui-formats@0.4.5 lingui-formats@0.4.2 lingui-formats@0.4.1 lingui-formats@0.4.0 lingui-formats@0.2.0 lingui-formats@0.1.1 lingui-formats@v0.3.0
Nothing to show
Clone or download
Failed to load latest commit information.
docs-old docs: Update links to new docs Sep 29, 2017
docs docs: document using locales for formatting Jul 23, 2018
examples feat: add support for locales (aka culture) (#249) Jul 23, 2018
flow-typed/npm style: Don't lint examples with flow Dec 31, 2017
packages chore: update packages Jul 23, 2018
scripts chore: use 2fa when publishing packages Jul 23, 2018
.all-contributorsrc docs: add react-native tutorial (#243) Jul 22, 2018
.babelrc fix: switch back to Babel 6 May 16, 2018
.babelrc.js feat: Set correct defaults in new and merged catalogs (#233) Jul 4, 2018
.eslintignore style: Fix linter errors Jul 8, 2017
.eslintrc chore: Add prettier Nov 24, 2017
.flowconfig style: Don't lint examples with flow Dec 31, 2017
.gitignore feat: add support for locales (aka culture) (#249) Jul 23, 2018
.prettierignore wip Dec 29, 2017
.prettierrc chore: Add prettier Nov 24, 2017 chore: add missing feature to changelog Jul 23, 2018 docs: add react-native tutorial (#243) Jul 22, 2018
LICENSE wip Dec 29, 2017
Pipfile chore: add watch command for docs Jul 4, 2018
Pipfile.lock docs: add section with external resources Jul 22, 2018 feat: Support both babel 6.x and 7.x (#248) Jul 22, 2018
appveyor.yml chore: fix appveyor config Jul 23, 2018
circle.yml feat: add support for locales (aka culture) (#249) Jul 23, 2018
package.json chore: Released version 2.3.0 Jul 23, 2018
yarn.lock chore: update packages Jul 23, 2018

Indiegogo campaign

There's ongoing campaign on Indiegogo to raise funds for this project. If you want to support it, please consider donation or share it with your friend.


Seamless internationalization in Javascript and React

Buy Me A Coffee

Join the chat at CircleCI Code Coverage PRs Welcome All Contributors MIT License

Watch on GitHub Star on GitHub Tweet

πŸ“– Documentation

πŸ“¦ Migrating to 2.x

Type-checked and intuitive way to internationalize applications in Javascript and React.

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

Key features

  • Small and fast - about 6kb gzipped
  • Babel plugin for convenient, type-checked way of writing ICU MessageFormat (recommended, but not required)
  • CLI for extracting and compiling message catalogs
  • Built on standard ICU MessageFormat (is able to replace react-intl completely)
    • Variable interpolation
    • Components inside translations (e.g: Read <Link to="...">documentation</Link>.)
    • Plurals, Ordinals and Categories (i.e. Select)
    • Number and Date formats (from Intl)
  • Works with manual and generated message IDs
  • Works with in any JS environment, while integration packages brings better developer experience in target environments (e.g: lingui-react for React)
  • High quality build (high test coverage, follows semver, deprecation warnings for breaking changes and migration guides for major releases)

See the tutorial for React

Example use case with React

Intuitive way of writing messages

No matter what i18n library you use, there is always an underlying message format that handles variable interpolation, plurals and date/number formatting. js-lingui isn't reinventing the wheel, but rather uses standardized ICU MessageFormat which is supported in many platforms (the same format that react-intl uses).

js-lingui goes one step further and allows you to write messages in a way so intuitive that you'll forget there's an underlying i18n library.

Compare following examples of low-level API and convenient functions/components:

Instead of:

  'Hello, my name is {name}', 
  { name }

… you simply write:

i18n.t`Hello, my name is ${name}`

Complex plural rules:

  `{numBooks, plural, 
    one {{name} has # book} 
    other {{name} has # books}}`, 
  { name, numBooks }

… becomes readable and type-checked:

  value: numBooks, 
  one: `${name} # book`, 
  other: `${name} # books`

The same message in React:

<Trans id="msg.simple" defaults="Hello {name}" values={{ name }} />

… becomes:

<Trans id="msg.simple">Hello {name}</Trans>

Components inside translations:

    defaults="Read the <0>documentation</0>."
    components={[<Link to="/docs" />]}

… works seamlessly:

<Trans id="">
  Read the <Link to="/docs">documentation</Link>.

Messages with plurals:

    defaults="{numBooks, plural, one{{name} has # book} other{{name} has # books}}"
    values={{ numBooks }}

… are type-checked and errorproof:

  one={<Trans>{name} has # book</Trans>}
  other={<Trans>{name} has # books</Trans>}

Note: In examples above, the first example is low-level API which you can use when babel plugin isn't available (e.g. in Create React Apps). However, you'll miss another layer of validation and type-checking for messages.

Message IDs are optional. Without them it's even easier, default messages become message ids:

const Pitch = () => (
    // Variable Interpolation
    <Trans>Hello {name}</Trans>
    // Seamless translations with components
      Read the <Link to="/docs">documentation</Link>.
    // Plurals
      one={{name} has # book}
      other={{name} has # books}

Batteries included - CLI for working with message catalogs

js-lingui ships with easy CLI for extracting, merging and compiling of message catalogs.

All messages from the source files can be extracted with one command:

lingui extract
Extracting messages from source files…
Collecting all messages…
Writing message catalogues…
Messages extracted!

Catalog statistics:
β”‚ Language β”‚ Total count β”‚ Missing β”‚
β”‚ cs       β”‚     42      β”‚   34    β”‚
β”‚ en       β”‚     42      β”‚   42    β”‚
β”‚ fr       β”‚     42      β”‚   42    β”‚

(use "lingui add-locale <language>" to add more locales)
(use "lingui extract" to update catalogs with new messages)
(use "lingui compile" to compile catalogs for production)

If you run this command second time, it'll merge translations from existing catalog with new messages.

Works with manual and generated message IDs

js-lingui doesn't force you to use generated message IDs either. If you prefer setting your IDs manually, just pass id prop. Generated message will be used as a default one:

  one={{name} has # book}
  other={{name} has # books}

Works anywhere

Core library @lingui/core works in any JS environment. Integration libraries like @lingui/react only brings better performance for target environments.


Please read the contributing guide to start contributing! Thanks goes to these people (emoji key):

TomΓ‘Ε‘ Ehrlich

πŸ’» πŸ“– πŸ’‘ βœ…

Josef Hornych

πŸ“– πŸ›

Christian Kaps



πŸ’» πŸ›

David Furlong



πŸ› πŸ“–

Sebastian SobociΕ„ski


Matt Labrum


Vincent Ricard


Adam Gruber


Spencer Mefford


Jeow Li Huan


Vojtech Novak


This project follows the all-contributors specification. Contributions of any kind welcome!