Skip to content
Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.
TypeScript JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore(ci): Update GH action Sep 17, 2019
docs chore: update Getting Started doc to include our CLI & eslint Nov 10, 2019
examples fix: check PluralRules & RelativeTimeFormat lazily instead Sep 18, 2019
scripts feature: allow AST to be passed in to IntlProvider, fixes #1335 (#1340) Jul 1, 2019
src feat: alias `defineMessages` to `@formatjs/macro` and deprecate our own Nov 1, 2019
test chore: set TZ to UTC during test so CI is consistent Nov 1, 2019
.eslintignore chore: tweak eslintignore Aug 11, 2019
.eslintrc reconfigure some tooling (#1320) Jun 13, 2019
.gitignore fix: avoid wrapping components with injectIntl (#1413), fixes #1412 Aug 13, 2019
.npmignore fix: remove babel.config.js from npm package Nov 12, 2019
.prettierignore chore: dont prettier CHANGELOG since its auto-gen Aug 2, 2019
.prettierrc chore: rm some custom utils impl (#1315) Jun 12, 2019
.travis.yml chore: fix build for windows Aug 12, 2019
CHANGELOG.md chore: Update CHANGELOG.md Nov 12, 2019
CONTRIBUTING.md Format markdown files (#1308) Jun 7, 2019
LICENSE.md Add license information Jun 27, 2014
README.md chore: update badges Sep 14, 2019
babel.config.js add tsconfig.json and setup pipeline to use ts compiler (#1311) Jun 13, 2019
jest.config.js fix: remove contextType usage Aug 9, 2019
package-lock.json chore(release): 3.6.0 Nov 12, 2019
package.json chore(release): 3.6.0 Nov 12, 2019
rollup.config.dist.js chore: update docs to highlight DOMParser Aug 21, 2019
tsconfig.cjs.json feat: expose a core bundle w/o parser (#1358) Jul 9, 2019
tsconfig.json feat: expose a core bundle w/o parser (#1358) Jul 9, 2019

README.md

React Intl

Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.

npm Version npm Version Build Status

minified size minzipped size

Overview

React Intl is part of FormatJS. It provides bindings to React via its components and API.

Slack: Join us on Slack at formatjs.slack.com for help, general conversation and more 💬🎊🎉 You can sign-up using this invitation link.

Documentation

React Intl's docs are in this GitHub /docs folder, Get Started. There are also several runnable example apps which you can reference to learn how all the pieces fit together.

(If you're looking for React Intl v1, you can find it here.)

Features

  • Display numbers with separators.
  • Display dates and times correctly.
  • Display dates relative to "now".
  • Pluralize labels in strings.
  • Support for 150+ languages.
  • Runs in the browser and Node.js.
  • Built on standards.

Example

There are several runnable examples in this Git repo, but here's a Hello World one:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {IntlProvider, FormattedMessage} from 'react-intl';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Eric',
      unreadCount: 1000,
    };
  }

  render() {
    const {name, unreadCount} = this.state;

    return (
      <p>
        <FormattedMessage
          id="welcome"
          defaultMessage={`Hello {name}, you have {unreadCount, number} {unreadCount, plural,
                      one {message}
                      other {messages}
                    }`}
          values={{name: <b>{name}</b>, unreadCount}}
        />
      </p>
    );
  }
}

ReactDOM.render(
  <IntlProvider locale="en">
    <App />
  </IntlProvider>,
  document.getElementById('container')
);

This example would render: "Hello Eric, you have 1,000 messages." into the container element on the page.

Pluralization rules: In some languages you have more than one and other. For example in ru there are the following plural rules: one, few, many and other. Check out the official Unicode CLDR documentation.

Contribute

Let's make React Intl and FormatJS better! If you're interested in helping, all contributions are welcome and appreciated. React Intl is just one of many packages that make up the FormatJS suite of packages, and you can contribute to any/all of them, including the Format JS website itself.

Check out the Contributing document for the details. Thanks!

License

This software is free to use under the Yahoo Inc. BSD license. See the LICENSE file for license text and copyright information.

You can’t perform that action at this time.