Using with ICU format

i18next localization as a service Find your translator
Search…
i18next itself is flexible enough to support multiple existing i18next formats beside its own. So also the ICU format, thanks to i18next-icu.
Find the full working sample here.
Extend the i18n instance with ICU module
To enable ICU format you will need to include the i18next-icu module into your i18next instance.
1
import i18n from 'i18next';
2
import ICU from 'i18next-icu';
3
import Backend from 'i18next-http-backend';
4
import LanguageDetector from 'i18next-browser-languagedetector';
5
import { reactI18nextModule } from 'react-i18next';
6
​
7
i18n
8
  .use(ICU)
9
  .use(Backend)
10
  .use(LanguageDetector)
11
  .use(reactI18nextModule) // if not using I18nextProvider
12
  .init({
13
    fallbackLng: 'en',
14
    debug: true,
15
​
16
    interpolation: {
17
      escapeValue: false, // not needed for react!!
18
    },
19
​
20
    // react i18next special options (optional)
21
    react: {
22
      bindI18n: 'languageChanged loaded',
23
      bindStore: 'added removed',
24
      nsMode: 'default'
25
    }
26
  });
27
​
28
​
29
export default i18n;
Copied!
Use the ICU format
using t function
1
import React, { Component } from 'react';
2
import { useTranslation } from 'react-i18next';
3
​
4
function MyComponent() {
5
  const { t, i18n } = useTranslation();
6
  // or const [t, i18n] = useTranslation();
7
  
8
  return <div>{t('icu', { numPersons: 500 })}</div>
9
}
10
​
11
// ...
12
​
13
// json
14
"icu": "{numPersons, plural, =0 {no persons} =1 {one person} other {# persons}}",
15
​
16
// result:
17
<div>500 persons</div>
Copied!
using the Trans Component
As is including plain ICU syntax inside a JSX node will result in invalid JSX as the ICU format uses curly brackets that are reserved by JSX.
So the default option is to use the Trans Component just with props like:
1
import { Trans } from 'react-i18next';
2
​
3
const user = 'John Doe';
4
​
5
<Trans
6
  i18nKey="icu_and_trans"
7
  defaults="We invited <0>{user}</0>."
8
  components={[<strong>dummyChild</strong>]}
9
  values={{ user }}
10
/>
11
​
12
// json
13
"icu_and_trans": "We invited <0>{user}</0>."
14
​
15
// result
16
We invited <strong>John Doe</strong>.
Copied!
While this works the resulting JSX is very verbose - guess we could do better.
using babel macros (Trans, Plural, Select)
Thanks to using kentcdodds/babel-plugin-macros we could use some babel magic to transpile nicer looking jsx to above Trans markup.
Check https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md for setting babel-plugin-macros up.
Using create-react-app? Make sure you are using react-scripts v2 as it includes the macro plugin.
1
$ # Create a new application
2
$ npx create-react-app
3
$ # Upgrade an existing application
4
$ yarn upgrade [email protected]
Copied!
1
import { Trans } from 'react-i18next/icu.macro';
2
​
3
const user = 'John Doe';
4
​
5
<Trans i18nKey="icu_and_trans">
6
  We invited <strong>{user}</strong>.
7
</Trans>
Copied!
The macro will add the needed import for Trans Component and generate the correct Trans component for you.
The correct string for translations will be shown in the browser console output as a missing string (if set debug: true on i18next init) or submitted via saveMissing (have saveMissing set true and a i18next backend supporting saving missing keys).
If linting or other code analysis tools are complaining or failing because of the invalid JSX syntax, you can use the defaults prop instead of putting your message as a child, and it will be parsed and updated to the correct format.
1
import { Trans } from 'react-i18next/icu.macro';
2
​
3
const user = 'John Doe';
4
​
5
<Trans 
6
  i18nKey="icu_and_trans_defaults"
7
  defaults="We invited <strong>{user}</strong>."
8
/>
Copied!
This will be converted by the macro into:
1
import { Trans } from 'react-i18next';
2
​
3
const user = 'John Doe';
4
​
5
<Trans 
6
  i18nKey="icu_and_trans_defaults"
7
  values={{user}}
8
  defaults="We invited <0>{user}</0>."
9
  components={[<strong>{user}</strong>]}
10
/>
Copied!
The defaults parsing supports the @babel/react preset, so any expressions that require more complex parsing may not work.
More samples:
1
// basic interpolation
2
<Trans>Welcome, { name }!</Trans>
3
​
4
// interpolation and components
5
<Trans>Welcome, <strong>{ name }</strong>!</Trans>
6
<Trans defaults="Welcome, <strong>{ name }</strong>" />
7
​
8
// number formatting
9
<Trans>Trainers: { trainersCount, number }</Trans>
10
<Trans>Trainers: <strong>{ trainersCount, number }</strong>!</Trans>
11
<Trans defaults="Trainers: <strong>{ trainersCount, number }</strong>!" />
12
​
13
// date formatting
14
<Trans>Caught on { catchDate, date, short }</Trans>
15
<Trans>Caught on <strong>{ catchDate, date, short }</strong>!</Trans>
16
<Trans defaults="Caught on <strong>{ catchDate, date, short }</strong>!" />
17
​
18
<Trans>You have <Link to="/inbox">{ unread, number } messages</Link></Trans>
19
<Trans defaults="You have <Link to='/inbox'>{ unread, number } messages</Link>" />
Copied!
Tagged Template for ICU
To support complex interpolations, react-i18next provides additional imports from the icu.macro. These provide a way to represent translations closer to the ICU messageformat syntax, but in a manner that is compatible with React and strictly typed in typescript.
For example, to format a number:
1
import { Trans } from "react-i18next/icu.macro";
2
​
3
const num = 1;
4
​
5
<Trans i18nKey="number">
6
 Incremented {num, number} times
7
</Trans>
Copied!
the above syntax, although valid javascript, will error when using a linting tool like eslint. Instead, we can do this:
1
import { Trans, number } from "react-i18next/icu.macro";
2
​
3
const num = 1;
4
​
5
<Trans i18nKey="number">
6
 Incremented {number`${num}`} times
7
</Trans>
Copied!
This results in the translation string Incremented {num, number} times
Supported interpolators are number, date, time, select, plural, and selectOrdinal.
More complex skeletons can also be represented:
1
import { Trans, number } from "react-i18next/icu.macro";
2
​
3
const awesomePercentage = 100;
4
​
5
<Trans i18nKey="number">
6
 It's awesome {number`${awesomePercentage}, ::percent`} of the time
7
</Trans>
Copied!
This results in the translation string It's awesome {awesomePercentage, number, ::percent} of the time.
Complex interpolations with plural/select/selectOrdinal
The plural and select and selectOrdinal interpolations support more advanced syntax. For instance, it is possible to interpolate both React elements and other interpolations:
1
import { Trans, plural, number } from "react-i18next/icu.macro";
2
​
3
const awesomePercentage = 100;
4
​
5
<Trans i18nKey="number">
6
 {plural`${awesomePercentage},
7
   =0 { It's ${<i>never</i>} awesome }
8
   =100 { It is ${<b>ALWAYS</b>} awesome! }
9
   other { It's awesome {number`${awesomePercentage}, ::percent`} of the time }`}
10
</Trans>
Copied!
This will result in the translation string {awesomePercentage, plural, =0 { It's <0>never&lt;/0&gt; awesome } =100 { It is <1>ALWAYS&lt;/1&gt; awesome! } =100 { It's awesome {awesomePercentage, number, ::percent} of the time }}
It possible to nest any interpolated type, including nested plural, select, or selectOrdinal.
Typescript support for interpolated template strings
The number, plural, and selectOrdinal functions will error if a non-number typed variable is interpolated.
1
import { Trans, number } from "react-i18next/icu.macro";
2
​
3
// type error below - awesomePercentage must be a number
4
const awesomePercentage = "100";
5
​
6
<Trans i18nKey="number">
7
 It's awesome {number`${awesomePercentage}, ::percent`} of the time
8
</Trans>
Copied!
The date and time functions will error if a non-Date object is interpolated.
1
import { Trans, date } from "react-i18next/icu.macro";
2
​
3
// type error below - awesomePercentage must be a number
4
const notADate = "100";
5
​
6
<Trans i18nKey="number">
7
 What time is it? it's {date`${notADate}`} o'clock
8
</Trans>
Copied!
Finally, the select function will error if a non-string is interpolated.
1
import { Trans, select } from "react-i18next/icu.macro";
2
​
3
// type error below - awesomePercentage must be a number
4
const notAString = 100;
5
​
6
<Trans i18nKey="number">
7
 {select`${notAString} oops { you have to pass in a string } other { oh well }`}
8
</Trans>
Copied!
Alternative syntax for select and plural
It is also possible to display select and plural and selectOrdinal using Elements Select, Plural and SelectOrdinal. All of them have full type safety in typescript.
Select
There is no way to directly add the needed ICU format inside a JSX child - so we had to add another component that gets transpiled to needed Trans component:
1
import { Select } from 'react-i18next/icu.macro';
2
​
3
// simple select
4
<Select
5
  i18nKey="optionalKey" // optional key
6
  switch={gender}
7
  male="He avoids bugs."
8
  female="She avoids bugs."
9
  other="They avoid bugs."
10
/>
Copied!
1
import { Select } from 'react-i18next/icu.macro';
2
​
3
// select with inner components
4
<Select
5
  i18nKey="optionalKey" // optional key
6
  switch={gender}
7
  male={<Trans><strong>He</strong> avoids bugs.</Trans>}
8
  female={<Trans><strong>She</strong> avoids bugs.</Trans>}
9
  other={<Trans><strong>They</strong> avoid bugs.</Trans>}
10
/>
Copied!
Plural
1
import { Plural } from 'react-i18next/icu.macro';
2
​
3
// simple plural
4
<Plural
5
  i18nKey="optionalKey" // optional key
6
  count={itemsCount}
7
  $0="There is no item."
8
  one="There is # item."
9
  other="There are # items."
10
/>
Copied!
1
import { Plural } from 'react-i18next/icu.macro';
2
​
3
// plural with inner components
4
<Plural
5
  i18nKey="optionalKey" // optional key
6
  count={itemsCount3}
7
  $0={<Trans>There is <strong>no</strong> item.</Trans>}
8
  one={<Trans>There is <strong>#</strong> item.</Trans>}
9
  other={<Trans>There are <strong>#</strong> items.</Trans>}
10
/>
Copied!
SelectOrdinal
1
import { SelectOrdinal } from 'react-i18next/icu.macro';
2
​
3
// simple SelectOrdinal
4
<SelectOrdinal
5
  i18nKey="optionalKey"
6
  count={position}
7
  one="You are #st in line"
8
  two="You are #nd in line"
9
  few="You are #rd in line"
10
  other="You are #th in line"
11
/>
Copied!
1
import { SelectOrdinal } from 'react-i18next/icu.macro';
2
​
3
// SelectOrdinal with inner components
4
<SelectOrdinal
5
  i18nKey="optionalKey"
6
  count={position}
7
  one={<Trans>You are <strong>#st in line</strong></Trans>}
8
  two={<Trans>You are <strong>#nd in line</strong></Trans>}
9
  few={<Trans>You are <strong>#rd in line</strong></Trans>}
10
  other={<Trans>You are <strong>#th in line</strong></Trans>}
11
  $7={<Trans>You are the lucky <strong>#th in line</strong></Trans>}
12
/>
Copied!
The needed plural forms can be looked up in the official unicode cldr table: http://www.unicode.org/cldr/charts/33/supplemental/language_plural_rules.html​
In addition to the plural forms you can specify results for given number values like show above:
0="show if zero"
in ICU it would be =0 {show if zero} but = is not allowed to be leading char in attributes so we replaced it with $
latest - Previous
TypeScript
Next - Misc
Using with fluent format
Last modified 10mo ago
Copy link
Contents
Extend the i18n instance with ICU module
Use the ICU format
using t function
using the Trans Component
using babel macros (Trans, Plural, Select)
Alternative syntax for select and plural