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
0
votes
0 answers

Intl.NumberFormat does not support "en-FR"? How to control the decimal & group characters?

I've noticed that en-FR does not appear to be a fully supported locale by the Intl.NumberFormat API. I've not found any official list of supported locales by the Intl api. However, I can assume the list from a fairly popular polyfill by…
tnort173
  • 348
  • 1
  • 4
  • 17
0
votes
0 answers

Translate on plural does not work in react-intl 6.2.1

As topic says, plurals does not seem to work. In previous 2.9.0 we used to have addLocaleData which was imported from react-intl/locale-data/en <--- (language version here) but in the new one it supposed to be integrated in react-intl. For older…
stAMy
  • 471
  • 2
  • 6
  • 14
0
votes
0 answers

React Intl with React 17

I'm trying to upgrade a massive React project from 16 to 17 and it says that React Intl does not find the react version: "npm ERR! Could not resolve dependency: npm ERR! peer react@"^0.14.9 || ^15.0.0 || ^16.0.0" from react-intl@2.9.0" I know intl…
stAMy
  • 471
  • 2
  • 6
  • 14
0
votes
0 answers

FormattedMessage react-intl breaks with Safari (not replacing dynamic values or tags)

I'm testing on Macbook pro using Safari version 13.1.2 (13609.3.5.1.5). All testing is having display issues for Safari only. Chrome / FireFox / etc. work just fine. What's displaying: Welcome, {displayName} What it should be displaying:…
Scott Million
  • 1
  • 1
0
votes
0 answers

Is there an easy way of using mui-x/date-picker together with react-intl?

I'm using @mui-x/date-pickers 5.0.x and react-intl for i18n management. The current way mui let's you do localization is through adapterLocale (docs). Their solution is incomplete (not all locales are supported), not accurate (the Intl API gives…
alexunder
  • 2,075
  • 3
  • 16
  • 29
0
votes
0 answers

Can Next.js handle both Redux Saga and React Intl? Element type is invalid: expected a string or a class/function

I am trying to convert an old, unmantained but complex vanilla React app in a Next.js app (please note I am quite a newbie at his first job as a developer). The problem is when it comes to implement both redux-saga and react-intl in Next.js. I am…
Dario Costa
  • 33
  • 1
  • 8
0
votes
0 answers

Polyfill intl-relativetimeformat only if needed and reduce bundle size

I'm working on an application that needs to use intl-relativetimeformat, intl-listformat and intl-pluralrules. I think we only need to polyfill to continue supporting IE11 but it's blowing up my bundle size by almost 2MB Is there a way to polyfill…
charmeleon
  • 2,693
  • 1
  • 20
  • 35
0
votes
0 answers

is there analog for enzyme-react-intl for react 17\18?

is there analog for enzyme-react-intl for react 17\18 ? Since it does not work with react 17, how to mimic mountWithIntl and shallowWithIntl from enzyme-react-intl?
tinymceHello
  • 19
  • 1
0
votes
0 answers

Testing react-intl components with enzyme and React 17

I used to test them with enzyme-react-intl(last version), import { shallowWithIntl } from 'enzyme-react-intl'; const wrapper = shallowWithIntl(); But after upgrading to react 17.0.2 and trying to install new…
tinymceHello
  • 19
  • 1
0
votes
1 answer

react-intl - Type '(string | MessageFormatElement)' is not assignable to type 'string'

I am using react-intl for i18n in react with TS. I am getting my translated string using the hook const intl = useIntl(); intl.messages['my.key'] However, TS throws an error Type '(string | MessageFormatElement)' is not assignable to type…
Hola
  • 329
  • 3
  • 18
0
votes
0 answers

Use react-intl imperative formatMessage with TypeScript?

I want to use formatMessage from react-intl (v5.25.1) for creating a string in order to use them later (in an event callback). For example this for my message ("hp:single:monthlyPerfTooltip": "AZ letzter Bezugszeitraum: {monthlyVal}",, sorry,…
BairDev
  • 2,865
  • 4
  • 27
  • 50
0
votes
1 answer

Error: [@formatjs/intl Error MISSING_TRANSLATION] Missing message: "currentStage." for locale "he", using id as fallback

so im trying to get data from DB, but i get this error and i dont know how to fix it. this is where im fetching the data - this is where im trying to print it - this is my he.json file constants - everything is printed but with error -
Yarden Yosef
  • 63
  • 9
0
votes
1 answer

@testing-library/react render Error: `target` and `targetRef` props are `undefined`, it' required to use one of them

I am trying to write a unit test for a custom react component that use the Dialog from @fluentui/react-northstar when I try to render the component from the test I get a error: Error: `target` and `targetRef` props are `undefined`, it' required to…
Valentin Suruceanu
  • 23
  • 8
0
votes
1 answer

Typescript Does Not Scream When Trying to Construct an Object with Omitted Field

Background: I'm trying to get typescript to scream when trying to pass an object that has a certain field, but can't make it work for this particular case. An example code: import * as React from "react"; // type ReactIntl.MessageValue = string |…
Elyasaf755
  • 2,239
  • 18
  • 24
0
votes
0 answers

React Intl Library - default currency of locale

I'm currently looking to use React intl as a way of formatting the currency to be the default of the country that the user is in from the browser. From the documentation, I can see that you input the currency to be a specific type (e.g. USD) - see…
bex
  • 7
  • 2
1 2 3
…
26 27