react-intl

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' />"}