Installation

formatjs is a set of libraries that help you setup internationalization in any project whether it's React or not.

Installation

npm

npm i -S react react-intl

yarn

yarn add react react-intl

Minimal Application

After following the step above, you should be able to get a minimal application like this running:

Node

import{createIntl, createIntlCache}from'@formatjs/intl'

// Translated messages in French with matching IDs to what you declared
const messagesInFrench ={
 myMessage:"Aujourd'hui, nous sommes le {ts, date, ::yyyyMMdd}",
}

// This is optional but highly recommended
// since it prevents memory leak
const cache =createIntlCache()

// Create the `intl` object
const intl =createIntl(
{
// Locale of the application
 locale:'fr',
// Locale of the fallback defaultMessage
 defaultLocale:'en',
 messages: messagesInFrench,
},
 cache
)

// Aujourd'hui, nous sommes le 23/07/2020
console.log(
 intl.formatMessage(
{
// Matching ID as above
 id:'myMessage',
// Default Message in English
 defaultMessage:'Today is {ts, date, ::yyyyMMdd}',
},
{ts:Date.now()}
)
)

// 19,00 €
console.log(intl.formatNumber(19,{style:'currency', currency:'EUR'}))

React

import*asReactfrom'react'
import{IntlProvider,FormattedMessage,FormattedNumber}from'react-intl'

// Translated messages in French with matching IDs to what you declared
const messagesInFrench ={
 myMessage:"Aujourd'hui, nous sommes le {ts, date, ::yyyyMMdd}",
}

exportdefaultfunctionApp(){
return(
<IntlProvidermessages={messagesInFrench}locale="fr"defaultLocale="en">
<p>
<FormattedMessage
id="myMessage"
defaultMessage="Today is {ts, date, ::yyyyMMdd}"
values={{ts:Date.now()}}
/>
<br/>
<FormattedNumbervalue={19}style="currency"currency="EUR"/>
</p>
</IntlProvider>
)
}

Output

<p>
 Aujourd'hui, nous sommes le 23/07/2020
<br/>
 19,00 €
</p>

Vue3

importVueIntlfrom'vue-intl'
import{createApp}from'vue'

const app =createApp(App)
app.use(VueIntl,{
 locale:'fr',
 defaultLocale:'en',
 messages:{
 myMessage:"Aujourd'hui, nous sommes le {ts, date, ::yyyyMMdd}",
},
})

<template>
 <p>
 {{
 $formatMessage(
 {id: 'myMessage', defaultMessage: 'Today is {ts, date, ::yyyyMMdd}'},
 {ts: Date.now()}
 )
 }}
 <br />
 {{ $formatNumber(19, {style: 'currency', currency: 'EUR'}) }}
 </p>
</template>

Output

<p>
 Aujourd'hui, nous sommes le 23/07/2020
<br/>
 19,00 €
</p>

Adding our babel-plugin/TypeScript Transformer for compilation

Our tooling supports babel, ts-loader, ts-jest, rollup-plugin-typescript2 & ts-patch for message compilation:

Babel

If you're using babel, add babel-plugin-formatjs to your dependencies:

npm

npm i -D babel-plugin-formatjs

yarn

yarn add -D babel-plugin-formatjs

and add it to your babel.config.js or .babelrc:

{
"plugins":[
[
"formatjs",
{
"idInterpolationPattern":"[sha512:contenthash:base64:6]",
"ast":true
}
]
]
}

ts-loader

npm

npm i -D @formatjs/ts-transformer

yarn

yarn add -D @formatjs/ts-transformer

import{transform}from'@formatjs/ts-transformer'

module.exports={
...otherConfigs,
 module:{
 rules:[
{
 test:/\.tsx?$/,
 use:[
{
 loader:'ts-loader',
 options:{
getCustomTransformers(){
return{
 before:[
transform({
 overrideIdFn:'[sha512:contenthash:base64:6]',
}),
],
}
},
},
},
],
},
],
},
}

ts-jest in jest.config.js

npm

npm i -D @formatjs/ts-transformer

yarn

yarn add -D @formatjs/ts-transformer

Take a look at ts-jest guide on how to incorporate custom AST Transformers.

ts-patch

npm

npm i -D @formatjs/ts-transformer

yarn

yarn add -D @formatjs/ts-transformer

{
"compilerOptions":{
"plugins":[
{
"transform":"@formatjs/ts-transformer",
"import":"transform",
"type":"config",
"overrideIdFn":"[sha512:contenthash:base64:6]",
"ast":true
}
]
}
}

rollup-plugin-typescript2

npm

npm i -D @formatjs/ts-transformer

yarn

yarn add -D @formatjs/ts-transformer

// rollup.config.js
import typescript from'rollup-plugin-typescript2'
import{transform}from'@formatjs/ts-transformer'

exportdefault{
 input:'./main.ts',

 plugins:[
typescript({
transformers:()=>({
 before:[
transform({
 overrideIdFn:'[sha512:contenthash:base64:6]',
 ast:true,
}),
],
}),
}),
],
}