Convert Figma logo to code with AI

lingui logojs-lingui

๐ŸŒ ๐Ÿ“– A readable, automated, and optimized (3 kb) internationalization for JavaScript

4,512
378
4,512
33

Top Related Projects

14,292

The monorepo home to all of the FormatJS related libraries, most notably react-intl.

7,730

i18next: learn once - translate everywhere

Give your JavaScript the ability to speak many languages.

14,292

The monorepo home to all of the FormatJS related libraries, most notably react-intl.

:globe_with_meridians: Internationalization plugin for Vue.js

2,974

Translate your Go program into multiple languages.

Quick Overview

Lingui is a powerful internationalization (i18n) library for JavaScript and React applications. It provides a complete solution for translating and formatting messages, including pluralization, gender, and custom formatters, with a focus on developer experience and type safety.

Pros

  • Excellent TypeScript support with type-safe message catalogs
  • Supports both React and vanilla JavaScript projects
  • Offers a CLI tool for extracting and compiling messages
  • Integrates well with popular frameworks and build tools

Cons

  • Learning curve might be steeper compared to simpler i18n libraries
  • Requires additional setup and configuration for optimal use
  • Limited community resources compared to some more established i18n libraries

Code Examples

  1. Basic usage in React:
import { Trans } from "@lingui/macro";

function Welcome() {
  return <h1><Trans>Welcome to our application!</Trans></h1>;
}
  1. Pluralization:
import { Plural } from "@lingui/macro";

function ItemCount({ count }) {
  return (
    <Plural
      value={count}
      one="# item"
      other="# items"
    />
  );
}
  1. Using variables:
import { t } from "@lingui/macro";

function Greeting({ name }) {
  return t`Hello, ${name}! Welcome to our site.`;
}

Getting Started

  1. Install Lingui:

    npm install --save-dev @lingui/cli @lingui/macro
    npm install --save @lingui/react
    
  2. Add Lingui configuration to your package.json:

    {
      "lingui": {
        "locales": ["en", "cs", "fr"],
        "sourceLocale": "en",
        "catalogs": [{
          "path": "src/locales/{locale}/messages",
          "include": ["src"]
        }]
      }
    }
    
  3. Extract messages:

    npx lingui extract
    
  4. Translate messages in generated catalogs

  5. Compile messages:

    npx lingui compile
    
  6. Set up the I18nProvider in your app:

    import { i18n } from "@lingui/core";
    import { I18nProvider } from "@lingui/react";
    import { messages } from "./locales/en/messages";
    
    i18n.load("en", messages);
    i18n.activate("en");
    
    function App() {
      return (
        <I18nProvider i18n={i18n}>
          {/* Your app components */}
        </I18nProvider>
      );
    }
    

Competitor Comparisons

14,292

The monorepo home to all of the FormatJS related libraries, most notably react-intl.

Pros of formatjs

  • More comprehensive ecosystem with additional tools and libraries
  • Wider adoption and community support
  • Better integration with popular frameworks like React

Cons of formatjs

  • Steeper learning curve due to more complex API
  • Heavier bundle size, especially when using all features
  • Less flexible syntax for translations in some cases

Code Comparison

formatjs:

import { FormattedMessage } from 'react-intl';

<FormattedMessage
  id="welcome"
  defaultMessage="Welcome, {name}!"
  values={{ name: userName }}
/>

js-lingui:

import { Trans } from '@lingui/macro';

<Trans id="welcome" values={{ name: userName }}>
  Welcome, {userName}!
</Trans>

Summary

formatjs offers a more comprehensive solution with wider adoption, but comes with a steeper learning curve and larger bundle size. js-lingui provides a simpler API and more flexible syntax for translations, but has a smaller ecosystem. Both libraries offer similar core functionality for internationalization, with formatjs providing more advanced features and integrations, while js-lingui focuses on simplicity and performance.

7,730

i18next: learn once - translate everywhere

Pros of i18next

  • Broader ecosystem with numerous plugins and integrations
  • Supports more complex pluralization rules and nesting
  • Extensive documentation and community support

Cons of i18next

  • Steeper learning curve due to more features and options
  • Can be overkill for smaller projects with simpler localization needs
  • Slightly more verbose syntax for basic translations

Code Comparison

i18next:

import i18next from 'i18next';

i18next.init({
  lng: 'en',
  resources: {
    en: {
      translation: {
        key: 'Hello, {{name}}!'
      }
    }
  }
});

i18next.t('key', { name: 'World' });

js-lingui:

import { t } from '@lingui/macro';

const message = t`Hello, ${name}!`;

Summary

i18next is a powerful and flexible internationalization library with a vast ecosystem, making it suitable for complex projects with diverse localization needs. However, this power comes at the cost of a steeper learning curve and potentially more verbose syntax for basic use cases. js-lingui, on the other hand, offers a simpler API and more streamlined syntax, which can be advantageous for smaller projects or teams prioritizing ease of use. The choice between the two largely depends on the specific requirements of your project and the level of complexity you're willing to manage in your internationalization setup.

Give your JavaScript the ability to speak many languages.

Pros of Polyglot.js

  • Lightweight and simple to use, with minimal setup required
  • Supports pluralization and interpolation out of the box
  • Can be used in both browser and Node.js environments

Cons of Polyglot.js

  • Limited features compared to more comprehensive i18n solutions
  • Lacks advanced formatting options and custom plural rules
  • No built-in support for extracting messages from source code

Code Comparison

Polyglot.js:

import Polyglot from 'node-polyglot';

const polyglot = new Polyglot();
polyglot.extend({greeting: 'Hello, %{name}!'});
console.log(polyglot.t('greeting', {name: 'John'}));

js-lingui:

import { t } from '@lingui/macro';

const name = 'John';
console.log(t`Hello, ${name}!`);

js-lingui offers a more natural syntax for translations using template literals, while Polyglot.js uses a more traditional key-based approach. js-lingui also provides additional features like message extraction, compilation, and more advanced pluralization rules, making it a more comprehensive solution for larger projects with complex internationalization needs.

14,292

The monorepo home to all of the FormatJS related libraries, most notably react-intl.

Pros of formatjs

  • More comprehensive ecosystem with additional tools and libraries
  • Wider adoption and community support
  • Better integration with popular frameworks like React

Cons of formatjs

  • Steeper learning curve due to more complex API
  • Heavier bundle size, especially when using all features
  • Less flexible syntax for translations in some cases

Code Comparison

formatjs:

import { FormattedMessage } from 'react-intl';

<FormattedMessage
  id="welcome"
  defaultMessage="Welcome, {name}!"
  values={{ name: userName }}
/>

js-lingui:

import { Trans } from '@lingui/macro';

<Trans id="welcome" values={{ name: userName }}>
  Welcome, {userName}!
</Trans>

Summary

formatjs offers a more comprehensive solution with wider adoption, but comes with a steeper learning curve and larger bundle size. js-lingui provides a simpler API and more flexible syntax for translations, but has a smaller ecosystem. Both libraries offer similar core functionality for internationalization, with formatjs providing more advanced features and integrations, while js-lingui focuses on simplicity and performance.

:globe_with_meridians: Internationalization plugin for Vue.js

Pros of vue-i18n

  • Specifically designed for Vue.js, offering seamless integration
  • Supports pluralization and datetime localization out of the box
  • Provides a component-based approach for localization

Cons of vue-i18n

  • Limited to Vue.js ecosystem, not suitable for other frameworks
  • Lacks advanced features like automatic plurals and gender-aware translations
  • May require more manual setup for complex localization scenarios

Code Comparison

vue-i18n:

const i18n = new VueI18n({
  locale: 'en',
  messages: {
    en: { hello: 'Hello' },
    ja: { hello: 'ใ“ใ‚“ใซใกใฏ' }
  }
})

js-lingui:

import { i18n } from "@lingui/core";
import { en, ja } from "make-plural/plurals";

i18n.loadLocaleData({
  en: { plurals: en },
  ja: { plurals: ja }
});

Key Differences

  • js-lingui is framework-agnostic, while vue-i18n is Vue-specific
  • js-lingui offers more advanced features like automatic plurals and gender-aware translations
  • vue-i18n provides easier integration with Vue components
  • js-lingui uses a macro-based approach for translations, potentially reducing runtime overhead
  • vue-i18n has built-in support for date and number formatting, while js-lingui requires additional setup

Both libraries are popular choices for internationalization, with the choice depending on the specific project requirements and framework preferences.

2,974

Translate your Go program into multiple languages.

Pros of go-i18n

  • Written in Go, offering better performance and concurrency support
  • Supports plural forms and gender-specific translations
  • Includes a command-line tool for managing translation files

Cons of go-i18n

  • Limited framework integration compared to js-lingui
  • Lacks advanced features like ICU MessageFormat support
  • Primarily focused on Go applications, limiting its use in other environments

Code Comparison

js-lingui:

import { t } from "@lingui/macro";

const greeting = t`Hello, ${name}!`;

go-i18n:

import "github.com/nicksnyder/go-i18n/v2/i18n"

localizer := i18n.NewLocalizer(bundle, "en")
greeting := localizer.MustLocalize(&i18n.LocalizeConfig{
    DefaultMessage: &i18n.Message{
        ID:    "Greeting",
        Other: "Hello, {{.Name}}!",
    },
    TemplateData: map[string]string{"Name": name},
})

Key Differences

  • js-lingui is designed for JavaScript/TypeScript projects, while go-i18n is tailored for Go applications
  • js-lingui offers more extensive React integration and supports ICU MessageFormat
  • go-i18n provides built-in pluralization and gender-specific translations
  • js-lingui has a more streamlined syntax for basic translations
  • go-i18n includes a command-line tool for managing translation files, which js-lingui lacks

Both libraries aim to simplify internationalization in their respective ecosystems, with js-lingui focusing on modern JavaScript frameworks and go-i18n catering to Go developers.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Linguijs

รฐยŸยŒยรฐยŸย“ย– A readable, automated, and optimized (3 kb) internationalization for JavaScript


Main Suite Release Workflow Testing Code Coverage PRs Welcome Join the community on Discord

Documentation ร‚ยท Quickstart ร‚ยท Example ร‚ยท Support ร‚ยท Contribute ร‚ยท License

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

Tutorials

Plugins

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.

NPM DownloadsLast 30 Days