ReactJS Intl

Nó là thư viện của ReactJS, một phần của FormatJS. Nó cung cấp các component và một API để định dạng ngày, tháng, số và chuỗi, bao gồm cả xử lý chuyển đổi, xứ lý văn bản một cách đa dạng.

1. Cài đặt

npm install react-intl

2. Tính năng

• Hiển thị số riêng biệt
• Hiển thị ngày tháng chính xác
• Hiển thị ngày tới thời điểm hiện tại
• Hiển thị chuỗi ở số nhiều
• Hỗ trợ hơn 150 ngôn ngữ

3. Ví dụ

• <FormattedDate>

import React from 'react';
import {IntlProvider, FormattedDate} from 'react-intl';

export default class CourseLists extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            date: 1459913574887
        }
    }

    render() {
        const customDate = ({value}) => (
            <IntlProvider locale = "fr">
                <FormattedDate value={new Date(value)}
                    day="numeric" month="long" year="numeric" />
            </IntlProvider>
        );
        
        return(
            <div>{customDate(this.state.date)}</div>
        )
    }
}

Preview:

mardi 5 avril 2016

• <FormattedNumber>

<FormattedNumber value={1000}/>

Preview:

<span>1,000</span>

• <FormattedPlural>

<FormattedPlural
    value={10}
    one='message'
    other='messages'
/>

Preview:

<span>messages</span>

• <FormattedRelative>

<FormattedRelative value={Date.now()}/>

Preview:

<span>now</span>

Lưu ý: Các component đơn lẻ phải được khai báo trong component cha là<IntlProvider>

Ở bài viết tiếp theo, mình sẽ đề cập tới đa ngôn ngữ với chuỗi trong ReactJS.

Tham khảo

https://github.com/yahoo/react-intl