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.
332 questions
5
votes
1 answer

Make id in FormattedMessage from react-intl inherit from a custom TypeScript interface to enable VS IntelliSense and type checking

Given that react-localization does not have date and number format and is heavily dependent on one developer we decided to switch to react-intl because it seems safer in the long…
Ogglas
  • 38,157
  • 20
  • 203
  • 266
5
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
  • 449
  • 2
  • 9
  • 20
5
votes
1 answer

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,129
  • 15
  • 25
5
votes
1 answer

Is it possible to override locale of one specific intl.formatMessage?

I use react-intl with en and fr, and my React app is wrapped in so that e.g. when lang is en, all intl.formatMessage calls result in English texts. What I want to achieve is that I want , but…
Peter
  • 1,549
  • 2
  • 16
  • 24
5
votes
1 answer

'_isMockFunction' of undefined

const spy = jest.spyOn(CardResult.prototype, 'expandAnswers'); const wrapper = mount(
oav
  • 51
  • 1
  • 3
5
votes
0 answers

Edge and IE won't display USD/CAD currency symbols when using Intl.NumberFormat

Sorry if this has been asked but I couldn't find anything... The following code in Chrome, Firefox, etc, will return a currency symbol of 'US$': new Intl.NumberFormat('en-CA', { style: 'currency', currencyDisplay: 'symbol', currency:…
Kirsten
  • 51
  • 4
5
votes
2 answers

babel-plugin-react-intl: Extract strings to a single file

Currently while using babel-plugin-react-intl, separate json for every component is created with 'id', 'description' and 'defaultMessage'. What I need is that only a single json to be created which contains a single object with all the 'id' as the…
iamsaksham
  • 2,301
  • 4
  • 21
  • 42
4
votes
2 answers

Getting error while creating production build 'does not contain a default export'

Hii I am working with language translation using "react-intl": "^4.1.1", but when I creating production build then code is not compiled and shows the error about default export Error : Creating an optimized production build... Failed to…
Varinder Sohal
  • 758
  • 1
  • 11
  • 31
4
votes
1 answer

Why doesn't Intl.NumberFormat work with units in Safari and Firefox?

I'm trying to use the example given here concerning formatting a number. console.log((16).toLocaleString('en-GB', { style: "unit", unit: "liter", unitDisplay: "long" })); I tried it in chrome and it works great. However, in…
nephews
  • 45
  • 4
4
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
  • 1,327
  • 2
  • 21
  • 46
4
votes
1 answer

Webpack dynamic import .json file?

I'm using React Intl for x number of languages (example below) and at the moment Im importing the following where I setup my App: import { addLocaleData } from 'react-intl'; import locale_en from 'react-intl/locale-data/en'; import locale_de from…
nickelman
  • 600
  • 2
  • 18
4
votes
2 answers

React-Intl: Message not formatting in Safari

I have the following translation: {count, number} {count, plural, one {Kundenbewertung} other {Kundenbewertungen}} In Chrome it displays 23 Kundenbewertungen just fine but in Safari it displays the translation string and throws the error Error…
mxmtsk
  • 2,915
  • 3
  • 15
  • 38
4
votes
0 answers

How to use array string in react-intl?

Is there any option to show translation from array string ? "app.components.TeaserContent.kooy":["your personal selection.", "outfits styled for you.", "new favourite items.", "your new wardrobe."] for import { defineMessages } from…
Mo.
  • 21,971
  • 31
  • 138
  • 201
4
votes
0 answers

Use of async/await to dynamically import the locales on addLocaleData

I have an 'external' intl provider because I have to handle some labels outside react components. I am trying to dynamically load the locales without using require statements and I am having a issue I am not sure why it's happening. So, the…
sergioviniciuss
  • 4,131
  • 2
  • 29
  • 44
4
votes
1 answer

React-intl const is giving [object object] as result

I am using "react-intl": "^2.4.0", and "react": "^16.2.0". I am trying to assign the output of tag to a constant and put it in the input tag placeholder. Expected Output Input field with text in the respective language in it but…
pankaj
  • 83
  • 1
  • 8
1 2
3
…
22 23