react-intl

What is react-intl?

The react-intl package is a comprehensive internationalization library for React that provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.

What are react-intl's main functionalities?

Internationalized messages

Allows you to define messages for translations that can be used throughout your application. The FormattedMessage component displays the message corresponding to the current locale.

{"<FormattedMessage id='greeting' defaultMessage='Hello, World!' />"}

Date and time formatting

Enables you to format dates and times according to the rules of the user's locale. The FormattedDate component automatically formats the date value to a readable string.

{"<FormattedDate value={new Date()} year='numeric' month='long' day='numeric' weekday='long' />"}

Number and currency formatting

Provides components to format numbers and currencies. The FormattedNumber component formats the number as a currency string according to the current locale and specified currency.

{"<FormattedNumber value={1000} style='currency' currency='USD' />"}

Pluralization

Supports plural forms in messages, allowing you to handle singular and plural cases for different languages. The FormattedMessage component is used with a plural format string to correctly display singular or plural text based on the count.

{"<FormattedMessage id='itemCount' defaultMessage='{count, plural, one {# item} other {# items}}' values={{count: itemCount}} />"}

Rich text formatting

Allows for rich text formatting within translations by passing components or HTML elements as values to the FormattedMessage component.

{"<FormattedMessage id='welcome' defaultMessage='Welcome, <b>{name}</b>!' values={{name: <b>John</b>}} tagName='p' />"}

Other packages similar to react-intl

i18next

i18next is a powerful internationalization framework for JavaScript, which provides a similar set of features for translating content. It is more flexible than react-intl and can be used with other frameworks besides React.

react-i18next

react-i18next is built on top of i18next and is specifically designed for React applications. It offers a similar feature set to react-intl but with a different API and additional features like namespace support and server-side rendering capabilities.

react-i18nify

React-i18nify is a simple translation and localization library for React and React Native, offering a simpler API and smaller bundle size compared to react-intl. It lacks some of the advanced formatting options provided by react-intl.

README

React Intl

This library provides React Components and a Mixin for internationalizing React web apps. The components provide a declarative way to format dates, numbers, and string messages, including pluralization.

Overview

React Intl is part of FormatJS, the docs can be found on the website:

http://formatjs.io/react/

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 many examples on the website, but here's a comprehensive one:

var IntlMixin         = ReactIntl.IntlMixin;
var FormattedMessage  = ReactIntl.FormattedMessage;
var FormattedRelative = ReactIntl.FormattedRelative;

var PostMeta = React.createClass({
    mixins: [IntlMixin],

    render: function () {
        return (
            <FormattedMessage
                message={this.getIntlMessage('post.meta')}
                num={this.props.post.comments.length}
                ago={<FormattedRelative value={this.props.post.date} />} />
        );
    }
});

var post = {
    date    : 1422046290531,
    comments: [/*...*/]
};

var intlData = {
    locales : ['en-US'],
    messages: {
        post: {
            meta: 'Posted {ago}, {num, plural, one{# comment} other{# comments}}'
        }
    }
};

React.render(
    <PostMeta post={post} {...intlData} />,
    document.getElementById('container')
);

This example would render: "Posted 3 days ago, 1,000 comments" into the container element on the page. The post.meta message is written in the industry standard ICU Message syntax, which you can also learn about on the FormatJS website.

Contibute

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.