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
1 answer

How to extract Text in a React application to json react-intl translation files

So I'm trying to add languages support to a React application using react-intl. The application has the Text in the JSX code. Is there a tool that can scan the code and generate ids for each Text and replace the text with the generated id?? Or do I…
usertest
  • 2,140
  • 4
  • 32
  • 51
0
votes
1 answer

FormatJS CLI Extract

I'm trying to get formatjs setup for use with my app which uses react-intl, and i'm running into an issue when doing an extract using their CLI. I currently have custom components that embed the FormattedMessage component inside of them,…
smb
  • 539
  • 2
  • 13
  • 33
0
votes
1 answer

Can we display Arabic currency symbols using only Intl.NumberFormat?

Currenty if I set the currency to QAR it will render as QAR in english and as ر.ق. in arabic... console.log(new Intl.NumberFormat("en", { style: "currency", currency: "QAR", currencyDisplay: "symbol" }).format(999)); // renders "QAR…
Sathania
  • 69
  • 1
  • 1
  • 7
0
votes
0 answers

Swiss German formatting with react-intl

In my ReactJS project I'm trying to provide a user interface in Swiss German (gsw-CH), including proper formatting of numbers, currencies, dates, and times. It seems like Swiss German is not supported out of the box, because I get this error in…
Timo Kunze
  • 135
  • 1
  • 6
0
votes
1 answer

Getting a @formatjs/ecma402-abstract version1.3 found error: DateTimeFormat/skeleton.d.ts(4,13) ',' expected. TS1005 Error

In the React project I'm using "react-intl": "^5.6.8" and all of sudden it started breaking when running a dev server or building, throwing an error related to the formatjs: …
syntax-punk
  • 3,736
  • 3
  • 25
  • 33
0
votes
1 answer

React: changing the state of a controlled value without using setValue?

Codesandbox: https://codesandbox.io/s/magical-black-vp1r0?file=/src/dropdown-selector.js I'm trying to build a very specific component and I'm not sure if its even possible or not. Please let me know. Requirements: SelectBox must be a CONTROLLED…
Jpark9061
  • 924
  • 3
  • 11
  • 26
0
votes
1 answer

Unable to use JSON from S3 buck in i18next

This is how my i18n file looks like - import i18n from 'i18next' import { initReactI18next } from 'react-i18next' import HttpApi from 'i18next-http-backend'; i18n .use(HttpApi) .use(initReactI18next) .init({ // resources: resourcesObj, …
0
votes
1 answer

react-intl: unicode character

Is it possible to make unicode characters work within react-intl json dictionaries? For example in en.json My custom &supTM application displays "&supTM" instead of TM
heisenberg7584
  • 563
  • 2
  • 10
  • 30
0
votes
1 answer

How to run formatjs compile?

How to run formatjs compile command without replacement of already translated messages? Now I run it this way: ../../node_modules/.bin/formatjs compile lang/ru.json --out-file compiled-lang/ru.json
Vera
  • 51
  • 1
  • 6
0
votes
1 answer

How to use useIntl hook and localize the array elements

I have a basic react functional component and I bind an array in which there are strings to be localized. Is there any other way to do it? I am trying as below and it says "Invalid Hook Call" import { useIntl } from "react-intl"; const…
0
votes
1 answer

getting String from react-intl's

I have a FormattedNumber component that looks like this: And a function that takes a String as an input, I need to pass the FormattedNumber's result…
agusting
  • 21
  • 3
0
votes
1 answer

React-Intl pass translation as string variable and not object

I'm in the process of adding react-intl to a payment app I'm building but hitting a snag. I apologize if this has been addressed somewhere. I scoured the issues and documentation and couldn't find a direct answer on this (probably just overlooking…
grigs
  • 1,140
  • 3
  • 15
  • 28
0
votes
1 answer

react-intl v4 upgrade `IntlProvider` not found preventing component from displaying when using `injectIntl` wrapper

I am trying to upgrade from react-intl v 2.3.0 to 4.5.1. I have run into a few issues around the injectIntl HOC since the upgrade. I have a shared component library within a monorepo that is imported into different features (combination of imported…
caraclarke
  • 370
  • 1
  • 5
  • 24
0
votes
1 answer

react-intl maintain number of digits in original number

I am using react-intl for formatting number based on locale. For cs locale, this.props.intl.formatNumber(-0.0001) is returning -0. I want library to return -0,0001. So, i don't want to round number. How can i achieve this.
mukesh210
  • 2,792
  • 2
  • 19
  • 41
0
votes
1 answer

React-Intl Changing language does not change the translations

I have a small issue with React-Intl. When the app is loaded, the translations are ok, but when I change the language, i18nConfig is changed but the translations are not updated. I tried several things but I can't make it work. App.js : let…
AnthonyDa
  • 493
  • 15
  • 34