React Internationalization

 

140 What is React-Intl?141 What are the main features of React Intl?142 What are the two ways of formatting in React Intl?143 How to use FormattedMessage as placeholder using React Intl?144 How to access current locale with React Intl145 How to format date using React Intl?

What is React Intl?

The React Intl library makes internalization in React straightforward, with off-the-shelf components and an API that can handle everything from formatting strings, dates, and numbers, to pluralization. React Intl is part of FormatJS which provides bindings to React via its components and API.

 

 

 

What are the main features of React Intl?

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.

Built on standards.

 

 

What are the two ways of formatting in React Intl?

The library provides two ways to format strings, numbers, and dates: react components or an API.

 

<FormattedMessage

  id={'account'}

  defaultMessage={'The amount is less than minimum balance.'}

/>

const messages = defineMessages({

  accountMessage: {

    id: 'account',

    defaultMessage: 'The amount is less than minimum balance.',

  }

})

 

formatMessage(messages.accountMessage)

 

 

How to use <FormattedMessage> as placeholder using React Intl?

The <Formatted... /> components from react-intl return elements, not plain text, so they can't be used for placeholders, alt text, etc. In that case, you should use lower level API formatMessage(). You can inject the intl object into your component using injectIntl() higher-order component and then format the message using formatMessage() available on that object.

 

import React from 'react'

import { injectIntl, intlShape } from 'react-intl'

 

const MyComponent = ({ intl }) => {

  const placeholder = intl.formatMessage({id: 'messageId'})

  return <input placeholder={placeholder} />

}

 

MyComponent.propTypes = {

  intl: intlShape.isRequired

}

 

export default injectIntl(MyComponent)

 

 

How to access current locale with React Intl?

You can get the current locale in any component of your application using injectIntl():

 

import { injectIntl, intlShape } from 'react-intl'

 

const MyComponent = ({ intl }) => (

  <div>{`The current locale is ${intl.locale}`}</div>

)

 

MyComponent.propTypes = {

  intl: intlShape.isRequired

}

 

export default injectIntl(MyComponent)

 

 

How to format date using React Intl?

The injectIntl() higher-order component will give you access to the formatDate() method via the props in your component. The method is used internally by instances of FormattedDate and it returns the string representation of the formatted date.

 

import { injectIntl, intlShape } from 'react-intl'

 

const stringDate = this.props.intl.formatDate(date, {

  year: 'numeric',

  month: 'numeric',

  day: 'numeric'

})

 

const MyComponent = ({intl}) => (

  <div>{`The formatted date is ${stringDate}`}</div>

)

 

MyComponent.propTypes = {

  intl: intlShape.isRequired

}

 

export default injectIntl(MyComponent)

 

 

---