formatjs.io Open in urlscan Pro
2606:50c0:8002::153  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Skip to main content

Format.JSDocsAPI ReferencesPolyfillsTooling
GitHub
🌜
🌞

SearchK

 * Getting Started
   * Installation
   * Application Workflow
   * Message Declaration
   * Message Extraction
   * Message Distribution
 * Guides
 * Core Concepts

On this page


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


Copy

yarn add react react-intl


Copy


MINIMAL APPLICATION

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

 * Node
 * React
 * Vue3

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

// Translated messages in French with matching IDs to what you declared
const messagesInFrench = {
  myMessage: "Aujourd'hui, c'est 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, c'est 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'}))


Copy

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>
  )
}


Copy

Output

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


Copy

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

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


Copy

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


Copy

Output

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


Copy


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


Copy

yarn add -D babel-plugin-formatjs


Copy

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

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


Copy


TS-LOADER

 * npm
 * yarn

npm i -D @formatjs/ts-transformer


Copy

yarn add -D @formatjs/ts-transformer


Copy

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]',
                    }),
                  ],
                }
              },
            },
          },
        ],
      },
    ],
  },
}


Copy


TS-JEST IN JEST.CONFIG.JS

 * npm
 * yarn

npm i -D @formatjs/ts-transformer


Copy

yarn add -D @formatjs/ts-transformer


Copy

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


TTYPESCRIPT

 * npm
 * yarn

npm i -D @formatjs/ts-transformer


Copy

yarn add -D @formatjs/ts-transformer


Copy

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


Copy


ROLLUP-PLUGIN-TYPESCRIPT2

 * npm
 * yarn

npm i -D @formatjs/ts-transformer


Copy

yarn add -D @formatjs/ts-transformer


Copy

// 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,
          }),
        ],
      }),
    }),
  ],
}


Copy
Edit this page

Next
Application Workflow
 * Installation
 * Minimal Application
 * Adding our babel-plugin/TypeScript Transformer for compilation
   * Babel
   * ts-loader
   * ts-jest in jest.config.js
   * ttypescript
   * rollup-plugin-typescript2

Docs
 * Getting Started
 * Polyfills
 * Libraries
 * Tooling

Community
 * Stack Overflow
 * Slack

Social
 * GitHub

Copyright © 2022 FormatJS. Built with Docusaurus.