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
3
votes
2 answers

{ Error: [React Intl Error MISSING_DATA] Missing locale data for locale: "th" in Intl.NumberFormat

I've checked this source https://formatjs.io/docs/react-intl#runtime-requirements , and tried to add this code import { NumberFormat } from '@formatjs/intl-numberformat' NumberFormat.__addLocaleData( …
Andrey Radkevich
  • 3,012
  • 5
  • 25
  • 57
3
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
  • 1,142
  • 5
  • 24
  • 44
3
votes
0 answers

mocking react class method with intl injected

I have a react class with intl injected like below import React from 'react'; import { injectIntl } from 'react-intl'; class CanvasView extends React.Component { constructor(props){ super(props); this.create = this.create.bind(this); …
Sharath M.H
  • 83
  • 8
3
votes
1 answer

Force FormattedNumber in react-intl to show only english number

I'm working on a react app that needs to be localized in English and Arabic, when switching from English to Arabic all the numbers are switching to Arabic also which in my case should remain in English format. is there a way that i can override the…
Ali Aljarah
  • 1,326
  • 2
  • 9
  • 16
3
votes
1 answer

Is there any reason to use useIntl hook in react-intl v3.x?

We recently updated react-intl from version 2.x to 3.3.2, which meant that we could remove the injectIntl HOC in all files that used any of the format-functions. Now in v3, we create the intl instance in a separate module and wrap our app in a…
user2878848
  • 33
  • 1
  • 1
  • 3
3
votes
1 answer

React - setting up dynamic FormattedMessage - error "Messages must be statically"

I am working on a react application - and when a user inputs a text field - I want a button on the same row - to change from 'generate' to 'save' but I want something like…
Rob
  • 153
  • 1
  • 12
3
votes
1 answer

How to add link to formated message in react intl?

I am using react intl ^2.4.0 version. I want to add link inside formatted message that gets translated as well. I am using this in combination with react cookie law i tried to use something like: const link = log in; const…
youngster
  • 195
  • 1
  • 12
3
votes
1 answer

How to NOT delete existing translations with "react-intl-translations-manager"?

I use React-Intl in my app and it works great, but to be easier to manage new keys to translate I started using "react-intl-translations-manager". My problem is that some of my translations are used through a notification system and the babel…
Corentin Daillie
  • 133
  • 1
  • 8
3
votes
1 answer

How to use injectIntl from react-intl and typescript together?

I'm trying to use injectIntl from react-intl with typescript like this (which is in accordance with what I found in answers to other questions): import { injectIntl, InjectedIntlProps } from "react-intl"; interface Props { certificate?:…
Jan Kalfus
  • 5,422
  • 2
  • 30
  • 38
3
votes
3 answers

What does this line of code mean? const {"intl": { formatMessage }, } = this.context

I'm new in react and I'm reading some code i found this line of code: const {intl: { formatMessage }, } = this.context is a const declaration but i don't understand I know is JS ES6 but i don't understand what is it for? How can I check the value…
Angelotti
  • 673
  • 1
  • 6
  • 20
3
votes
0 answers

How to return an empty string with react-intl

I am using the react library react-intl. I am trying to return an empty string with FormattedHTMLMessage and when I am sending an id, that is mapping to an empty string: "HeaderText.empty": "", In return I don't get an empty string, it just renders…
Leff
  • 1,968
  • 24
  • 97
  • 201
3
votes
2 answers

How to format a number to percentage with two decimals using FormatJs Message Syntax?

Using react-intl I have the following message: serviceFee: { en: 'Service fee: ({fee, number, percent})', ... }, When I call I expect it to render: Service fee: 6.25% But I get a…
Ramon Balthazar
  • 3,907
  • 3
  • 25
  • 34
3
votes
1 answer

Dynamically change locale without redux

I was wondering if it was possible to dynamically change the locale and have the app rerender without using redux. ReactDOM.render( …
gouletf
  • 111
  • 1
  • 8
3
votes
1 answer

How to use FormattedMessage in input placeholder

I know there is the similar question here: React-Intl How to use FormattedMessage in input placeholder But I am using TypeScript. this code: import { injectIntl, intlShape } from 'react-intl'; ChildComponent.propTypes = { intl:…
Twitter khuong291
  • 11,328
  • 15
  • 80
  • 116
3
votes
1 answer

How to allow german user to enter numbers in german format in React JavaScript

We are developing application which should support both German and English users. What can we do to allow German users to enter numbers in German format (, as decimal point and . as thousand separator), and moment he tab out from input box, we…
Anand
  • 4,523
  • 10
  • 47
  • 72
1 2 3
…
26 27