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
133
votes
14 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
  • 4,680
  • 5
  • 24
  • 58
71
votes
12 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,438
  • 3
  • 15
  • 24
52
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
  • 17,489
  • 35
  • 150
  • 263
37
votes
4 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
  • 9,107
  • 19
  • 70
  • 130
30
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
  • 9,107
  • 19
  • 70
  • 130
28
votes
5 answers

Error: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it) React-Intl for translation

Facing Below build issue: Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it) File was processed with these loaders: * ./node_modules/babel-loader/lib/index.js *…
Raunak Deep Srivastava
  • 283
  • 1
  • 3
  • 4
28
votes
6 answers

Using Intl properly in Android React Native app

I'm trying to use number formatter of Intl, which works perfectly on iOS and when debugger is attached to either iOS or Android, but only fails on Android without debugger attached due to outdated JSC in Android. After a bit research I've found two…
Can Poyrazoğlu
  • 33,241
  • 48
  • 191
  • 389
24
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…
mdmb
  • 4,833
  • 7
  • 42
  • 90
24
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
  • 992
  • 1
  • 7
  • 26
19
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…
Rafael López Dorado
  • 529
  • 1
  • 4
  • 16
19
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,191
  • 2
  • 8
  • 6
15
votes
5 answers

React-intl, use api with Typescript

I would like to use the formatMessage function of the react-intl API to insert a message as placeholder, but I can't figure out the right way to access this function. Here is a simplified version of what I have: // index.tsx
Emarco
  • 1,385
  • 3
  • 12
  • 23
14
votes
1 answer

defaultLocale is not keeping default lang in Next.js i18n

I'm trying to make my default language in Next.js i18n but always is getting "En" as default language called like fallback. And I also get this error: Error: [@formatjs/intl Error MISSING_DATA] Missing locale data for locale: "sq" in…
Riks
  • 165
  • 1
  • 5
14
votes
6 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
  • 403
  • 1
  • 5
  • 18
14
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…
Abraham Gnanasingh
  • 837
  • 2
  • 10
  • 31
1
2 3
…
26 27