Formatting

Formating is a way how to render translation into a final string, with variable parameters. Formatters are supported in form of plugin.

Simple formatter

FormatSimple plugin if you just need to include variables in your translations. It is very minimalistic, only intended to interpolate your parameters and save your bundle size.

import { FormatSimple } from '@tolgee/web';
...
tolgee.use(FormatSimple());

Example

tolgee.t('basket_items', '{count} items in the basket', { count: 10 })
// -> 10 items in the basket

Icu formatter

For advanced formatting functionality install FormatIcu plugin, which is shipped in separate package.

npm

npm install @tolgee/format-icu@5.x.x

yarn

yarn add @tolgee/format-icu@5.x.x

pnpm

pnpm install @tolgee/format-icu@5.x.x

Use it like this:

import { FormatIcu } from '@tolgee/format-icu';

tolgee.use(FormatIcu());

Examples

tolgee.t('progress', 'Progress: {progress, number, percent}', { progress: 0.1 })
// -> Progress: 10%

tolgee.t('basket_items', '{count, plural, one {# item} other {# items}} in the basket', { count: 10 })
// -> 10 items in the basket

Read more about ICU message format

info

For react-native you might need to polyfill Intl object. Use @formatjs/intl-locale and @formatjs/intl-pluralrules to make plurals work.