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.
332 questions
59
votes
11 answers

React-Intl How to use FormattedMessage in input placeholder

I'm unsure how to get the values from into a placeholder format like input: } /> as it would return [Object object]…
Bryan
  • 1,258
  • 3
  • 14
  • 23
57
votes
6 answers

How to get list of all timezones in javascript

I am developing an application with react/redux, and I started using library react-intl for formatting messages and dates. I have already been able to show in a tag what timezone it's using. I would like to have in a select all the…
Mayday
  • 3,482
  • 2
  • 15
  • 44
42
votes
3 answers

react-intl vs react-i18next for ReactJS internationalization (i18n)

I need to build a multilanguage application using ReactJS. The application needs a custom dictionary for different languages as well as automatic formatting of date/time, numbers and currency. From all I´ve seen there are 2 very popular…
Mendes
  • 13,757
  • 24
  • 122
  • 217
27
votes
3 answers

React-Native and Intl polyfill required on Android device

I recently updated my Android Studio and many components/sdk and since then React-Intl complains about intl library missing, even though it was working fine before. I have installed the intl polyfill and I import it at the very top of my main file…
alexmngn
  • 7,551
  • 14
  • 57
  • 117
21
votes
2 answers

Is there any way to access the current locale with React-Intl?

I was wondering if there is any way to access what is the currently set locale with React-Intl? Let's say I create this: render() { return ( ); } In App, I would like to do…
alexmngn
  • 7,551
  • 14
  • 57
  • 117
21
votes
1 answer

Injecting react-intl object into mounted Enzyme components for testing

EDIT: Solved! Scroll down for the answer In our Component tests we need them to have access to the react-intl context. The problem is that we are mounting single components (with Enzyme's mount()) without their parent wrapper. This…
Mirage
  • 957
  • 1
  • 6
  • 24
16
votes
3 answers

react-intl - accessing nested messages

I'm trying to use react-intl package inside an app. The app is rendered on the server so I wrote some code to determine which language to use and serve into IntlProvider. Translations were provided in messages.js file and they look like this: export…
Ancinek
  • 3,279
  • 3
  • 28
  • 70
16
votes
7 answers

Use React-intl translated messages in Redux middleware

I support several languages in my application and use React-intl for this. I have the Redux middleware where I make a call to the server and in the case of error I want to show an error on the UI. I know that I can do something like: 1) dispatch an…
Anton
  • 1,031
  • 1
  • 8
  • 6
15
votes
3 answers

React-Intl how to switch locale and messages from variable

I'm trying to figure out how to change language using React-Intl. This is my first React App and it has been made with create-react-app, I'm not using Redux nor Flux. In my index.js I have the following code: import React from 'react'; import…
13
votes
2 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
  • 450
  • 1
  • 4
  • 9
13
votes
5 answers

React-intl for non components

Currently I have the following code to expose react-intl to non-components, but it throws an error for intl as undefined. I have created a separate component as 'CurrentLocale' and inject-intl to it. The exporting function t will use intl…
Kanishka
  • 357
  • 1
  • 4
  • 16
12
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,353
  • 4
  • 23
  • 42
12
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,274
  • 3
  • 17
  • 31
12
votes
5 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
  • 7,173
  • 6
  • 27
  • 42
11
votes
3 answers

intl.formatMessage not working - react-intl

I am trying to do language translation using react-intl. When I use this , it is working perfect. But when I use the following code with intl.formatMessage(), it is not working and throwing some errors. I don't…
1
2 3
22 23