Installation

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

Installation#

npm
yarn

npm i -S react react-intl

Minimal Application#

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

Node
React
Vue3

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

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

export default function App() {
  return (
    <IntlProvider messages={messagesInFrench} locale="fr" defaultLocale="en">
      <p>
        <FormattedMessage
          id="myMessage"
          defaultMessage="Today is {ts, date, ::yyyyMMdd}"
          values={{ts: Date.now()}}
        />
        <br />
        <FormattedNumber value={19} style="currency" currency="EUR" />
      </p>
    </IntlProvider>
  )
}

Output

<p>
  Aujourd'hui, c'est 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 & ttypescript for message compilation:

Babel#

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

npm
yarn

npm i -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
yarn

npm i -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
yarn

npm i -D @formatjs/ts-transformer

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

`ttypescript`#

npm
yarn

npm i -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
yarn

npm i -D @formatjs/ts-transformer

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

export default {
  input: './main.ts',

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

Installation#

Minimal Application#

Adding our babel-plugin/TypeScript Transformer for compilation#

Babel#

ts-loader#

ts-jest in jest.config.js#

ttypescript#

rollup-plugin-typescript2#

`ts-loader`#

`ts-jest` in `jest.config.js`#

`ttypescript`#

`rollup-plugin-typescript2`#