FormatJs

FormatJS is a modular collection of javascript used to format numbers, dates, and strings for internationalization. It consists of a set of core libraries based on JavaScript Intl built-in and industry-wide I18N standard core libraries, as well as now generic template and component libraries.

Internationalization Guide

  • Basic principles of internationalization
    • Internationalization is important
    • Locale: language and locale
    • Translation string
    • Pre-set translation Settings
    • context
  • Runtime environment
    • Browser support intL
    • Add the Intl APIs
    • Intl.js Polyfill – Intl.NumberFormat and Intl.DateTimeFormat APIs
  • Message syntax

Commonly used FormatJS integration package

  • react
  • ember
  • handlebars
  • dust

react

Formatjs integrates react package files to format dates, numbers, and strings, including complex numbers, and handle translations. Internationalizing a Web app is a complex task, and if you have not been exposed to I8N in JavaScript before, it is recommended to start with the following rules:

  • Basic Internationalization Principles
  • Runtime Environments
  • Internationalization Tutorial From Smashing Magazine

Use of the react-intl package

npm install react-intl --save

Copy the code

The react-intl NPM file can be set to commNjs, ES6, UMD dev, UMD prod by setting the package.json file main. But whether you use that version of React Intl, they all provide the same naming export as follows:

  • injectIntl
  • defineMessages
  • IntlProvider
  • FormattedDate
  • FormattedTime
  • FormattedRelativeTime
  • FormattedNumber
  • FormattedPlural
  • FormattedMessage
  • FormattedHTMLMessage

Apps that use the React-INTl package must be used<IntlProvider>component

ReactDOM.render(
  <IntlProvider locale={usersLocale} messages={translationsForUsersLocale}>
    <App />
  </IntlProvider>,
  document.getElementById('container'));Copy the code

Formatting data

React Intl Formats data using the React Component and its API. Modules provide common react Native Apps integration and internationalization modes, such as
. Apis are used to format data into string values that do not fit react elements. For example, a title or aria property, or a side effect in the component DidMount.
*>

React Intl provides an API that can be accessed through a high-level component (HOC) factory injection into Intl. It wraps the incoming React component with a high-level React component that provides a force-formatting API. (This is similar to the connect to storage pattern in Flux implementations.)

example

Here is an example of setting the i18N context and formatting data using the

, FormattedRelative> components and API intl.formatDate(date) :

import React from 'react';
import ReactDOM from 'react-dom';
import {injectIntl, IntlProvider, FormattedRelative} from 'react-intl';

const PostDate = injectIntl(({date, intl}) => (
  <span title={intl.formatDate(date)}>
    <FormattedRelative value={date} />
  </span>
));

const App = ({post}) => (
  <div>
    <h1>{post.title}</h1>
    <p>
      <PostDate date={post.date} />
    </p>
    <div>{post.body}</div>
  </div>
);

ReactDOM.render(
  <IntlProvider locale={navigator.language}>
    <App
      post={{
        title: 'Hello, World! ',
        date: new Date(1459913574887),
        body: 'Amazing content.',
      }}
    />
  </IntlProvider>,
  document.getElementById('container'));Copy the code