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.

License

Notifications You must be signed in to change notification settings

jmschlmrs/react-intl

This branch is 4716 commits behind formatjs/formatjs:main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
sbertal
May 27, 2019
5881153 · May 27, 2019
May 16, 2019
May 16, 2019
Jan 31, 2019
May 27, 2019
May 27, 2019
Oct 3, 2018
Jan 25, 2016
Sep 3, 2017
Sep 24, 2018
Sep 1, 2017
May 27, 2019
Mar 24, 2017
Jun 27, 2014
May 15, 2019
May 27, 2019
May 27, 2019
May 27, 2019
May 27, 2019

Repository files navigation

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 Build Status Dependency Status

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.

React Intl's docs are in this GitHub repo's Wiki, 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.

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%