Stack Overflow
Stack Overflow

Questions tagged [react-intl]

React Components for internationalization. Combines react components with FormatJS.

This library provides React Components and a Mixin to format data and strings, and internationalize your React app.

Features

  • Formats numbers and dates/times, including those in complex messages.
  • Formats relative times (e.g., "3 hours ago").
  • Formats complex messages, including plural and select arguments using ICU Message syntax.
  • Supports custom formatters for numbers and dates/times.

Installation

npm install react-intl
396 questions
14
votes
6 answers

How to retrieve a string in ReactIntl 2.0 without using FormattedMessage

Please correct me if I am wrong, FormattedMessage in ReactIntl returns a string wrapped by span tags. In ReactIntl 1.2, we have the option to use this.getIntlMessage('key') to get only the string part. Here is my question: Is there an equivalent of…
C.Lee
  • 10,451
  • 9
  • 31
  • 46
13
votes
3 answers

Attempted import error: 'addLocaleData' is not exported from 'react-intl'

It's return error when i try this code react-intl version 3.1.6 && react version 16.9 import { IntlProvider, FormattedMessage , addLocaleData} from 'react-intl';
Chi Bui
  • 506
  • 1
  • 5
  • 10
13
votes
3 answers

React-intl define messages outside of react

I have utils.js file. export function categoryIdToCategoryName(categoryId) { let name; switch (categoryId) { case constants.RISK_CATEGORY_LOW: name = 'low'; break; case constants.RISK_CATEGORY_MEDIUM: name =…
dfgd
  • 455
  • 1
  • 4
  • 20
13
votes
1 answer

How to translate react-router Route paths

My application has more than one locale (it, en). I need to translate all the routes. For example I have the terms and condition page that has to paths (one per locale): it/termini en/terms I need than to do something like: // routes.js const…
cl0udw4lk3r
  • 2,663
  • 5
  • 26
  • 46
13
votes
2 answers

React-intl multi language app: changing languages and translations storage

I have react-router app and would like to add i18n. In react-intl example root component wrapped in IntlProvider: ReactDOM.render( , document.getElementById('container') ); But there is only one…
qwe asd
  • 1,598
  • 3
  • 21
  • 31
10
votes
1 answer

react-intl with react-testing-library gives Invalid hook call error

in our project we use react-intl for internationalisation. We are using jest as the testing framework and we decided to move our unit test utility library from enzyme to react-testing-library. But now, since there is no shallow rendering, I have to…
onuriltan
  • 3,730
  • 4
  • 25
  • 37
10
votes
2 answers

How to use Intl.NumberFormat with react native?

Im trying to convert a number to price format in react native. How to use https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat (Intl.NumberFormat) this with react native?
m9m9m
  • 1,655
  • 3
  • 21
  • 41
10
votes
1 answer

Dynamically import language json file for react / react-intl

This is the way I configure my client to render the proper language through react-intl. import localeData from './translations/en.json'; //import localeData from './translations/xx.json'; <-- any language const render = routes => { match({…
Yen Sheng
  • 695
  • 1
  • 12
  • 28
9
votes
1 answer

How handle "missing message" error in react-intl?

I'm using react-intl version 2.4.0 and for some translations I receive "missing message" error in console. Is there any way to handle them without upgrading to v3? …
Yerlan Yeszhanov
  • 2,149
  • 12
  • 37
  • 67
9
votes
3 answers

How do you pass a parameter to defineMessages in react-intl?

I have an error message like the one below: Could not retrieve data: ${e} How do I convert this to a definedMessage that can accept this error parameter? A standard definedMessage: const messages = defineMessages({ dataError: { …
reectrix
  • 7,999
  • 20
  • 53
  • 81
9
votes
1 answer

How to use placeholder with intl.formatMessage

I'm trying to use react-intl to add localization to my app. Like this
cromir
  • 651
  • 1
  • 6
  • 16
9
votes
1 answer

Manual mock React-Intl with Jest to have snapshot testing

I have been struggling mocking React-Intl library with Jest because I'm having this error when I run tests: Invariant Violation: [React Intl] Could not find required `intl` object. needs to exist in the component ancestry. The…
Albert Olivé Corbella
  • 4,061
  • 7
  • 48
  • 66
9
votes
4 answers

How can I formatMessage with a tags (links) using react-intl?

I need to add links to the text I need translated. How can I formatMessages that have links? Right now this is what I am trying to do: const messages = defineMessages({ copy: { id: 'checkout.OrderReview.copy', description: 'Label for add…
Stephani Bishop
  • 1,261
  • 1
  • 13
  • 20
8
votes
1 answer

How to insert HTML tag with injectIntl formatMessage using React-Intl?

I have a react-intl package issue. I am using an injectIntl way to use props in the component. Pure String is fine, but it will not work if I wrapped the HTML tag. Pure String Success Case const _tableNoText = intl.formatMessage( { id:…
tommychoo
  • 611
  • 2
  • 11
  • 20
8
votes
3 answers

Testing react-intl components with enzyme

I have looked into react-intl for suggestions but it doesn't leave any explicit documentation for enzyme. This is how I have been trying to write my tests. import {IntlProvider} from 'react-intl'; const intlProvider = new IntlProvider({locale:…
Deadfish
  • 2,047
  • 16
  • 17
1
2
3
…
26 27