Lingui

https://lingui.dev/docs

Admin

Lingui is a lightweight, open-source internationalization (i18n) framework for JavaScript and...

Tokens:1,807

Snippets:27

Trust Score:8.2

Update:4 hours ago

Show doc for...

Tokens:

Raw

### Compile message catalogs (JavaScript)

Source: https://lingui.dev/

The Lingui CLI compiles message catalogs into a format usable in the application. This example shows a module exporting parsed JSON messages.

```javascript
module.exports = { 
  messages: JSON.parse("...") 
};
```

--------------------------------

### Translated message catalog (gettext)

Source: https://lingui.dev/

After translation, the catalog contains the translated string. This example shows the same message translated to Czech: 'Ahoj {name}!'.

```gettext
#: src/App.tsx:24
msgid "Hello {name}!"
msgstr "Ahoj {name}!"
```

--------------------------------

### Basic usage of Trans component with @lingui/react/macro

Source: https://lingui.dev/

Use the `Trans` component to wrap translatable JSX content. The `comment` prop provides a hint for translators. This example is from the 'Basic Usage' tab.

```jsx
import { Trans } from "@lingui/react/macro"

function App() {
  return (
    <Trans
      comment="Docs link on the website"
    >
      Read the <a href="https://lingui.dev">documentation</a>
      for more info.
    </Trans>
  )
}
```

--------------------------------

### Define messages with Trans component

Source: https://lingui.dev/

Write messages directly in your codebase using Lingui's components. The example shows a Trans component with a placeholder {name}.

```jsx
<p>
  <Trans>Hello {name}!</Trans>
</p>
```

--------------------------------

### Extract message catalog (gettext)

Source: https://lingui.dev/

The Lingui CLI extracts translation keys and creates or updates message catalogs. This example shows the extracted catalog entry for the message 'Hello {name}!'.

```gettext
#: src/App.tsx:24
msgid "Hello {name}!"
msgstr "Hello {name}!"
```

Tokens:

Raw