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
Permalink
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
CHANGELOG.md chore: add missing feature to changelog Jul 23, 2018
CONTRIBUTING.md 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
README.md 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

README.md

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.


jsLingui

Seamless internationalization in Javascript and React


Buy Me A Coffee

Join the chat at https://gitter.im/lingui/js-lingui 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:

i18n._(
  'Hello, my name is {name}', 
  { name }
)

… you simply write:

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

Complex plural rules:

i18n._(
  `{numBooks, plural, 
    one {{name} has # book} 
    other {{name} has # books}}`, 
  { name, numBooks }
)

… becomes readable and type-checked:

i18n.plural({ 
  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:

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

… works seamlessly:

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

Messages with plurals:

<Trans 
    id="msg.plural" 
    defaults="{numBooks, plural, one{{name} has # book} other{{name} has # books}}"
    values={{ numBooks }}
/>

… are type-checked and errorproof:

<Plural 
  id="msg.plural"
  value={numBooks}
  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 = () => (
  <div>
    // Variable Interpolation
    <Trans>Hello {name}</Trans>
    
    // Seamless translations with components
    <Trans>
      Read the <Link to="/docs">documentation</Link>.
    </Trans>
    
    // Plurals
    <Plural 
      value={numBooks}
      one={{name} has # book}
      other={{name} has # books}
    />
  </div>
)

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:

<Plural 
  id="msg.plural"
  value={numBooks}
  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.

Contributors

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


TomΓ‘Ε‘ Ehrlich

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

Josef Hornych

πŸ“– πŸ›

Christian Kaps

πŸ›

brunesto

πŸ’» πŸ›

David Furlong

πŸ’¬

Thibaut

πŸ› πŸ“–

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!

License

MIT