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

Next JS with react-intl creates an ancestry issue

I'm trying to setup NEXT Js with react-intl. I've added to my _app.tsx the setup for react-intl as follows: import { IntlProvider } from 'react-intl'; import English from "../../lang/compiled-locales/en-US.json" import French from…
denislexic
  • 10,786
  • 23
  • 84
  • 128
2
votes
1 answer

How to use react-intl with yup and react-hook-forms?

I am trying to use react-intl to create a localized validation schema with yup. However, all I could find is integration with i18n. I am using react-intl already as my main localization tool; therefore, I would like to stay with this tool. Is it…
Le Tuan Anh
  • 43
  • 9
2
votes
2 answers

I am getting MISSING_MESSAGE error for next-intl npm package for next.js app

import { useEffect } from "react"; import type { AppProps } from "next/app"; import Script from "next/script"; import { SWRConfig } from "swr"; import { useRouter } from "next/router" import { AppContext } from "@context/index"; import {…
Samruddh Shah
  • 41
  • 2
  • 5
2
votes
0 answers

React Testing Library with React Intl - getNodeText() throws error

In the React Testing Library tests, I'd like to use the translation library instead of direct strings in the default language. In the documentation, there is information that it can be achieved by using: const buttonText =…
Paweł Głosz
  • 31
  • 3
2
votes
1 answer

Parsing variable for FormattedMessage ID in react-intl

I have a bunch of error messages that are being set as state variable, like so: if (err.message === "Invalid code or auth state for the user.") { this.setState({ errorMessage: "sms.error.incorrect", goodCode: false, }); }…
Eric Mitjans
  • 2,149
  • 5
  • 40
  • 69
2
votes
2 answers

FormattedMessage values chunks using typescript

I saw this example in the docs: (
Gregory
  • 149
  • 1
  • 10
2
votes
0 answers

Error: Element type is invalid: expected a string (for built-in components) ....... following the upgrade of react-native version

I am getting the following error when i open my app from android phone. the code used to work fine on react-native version 0.55.3. but since i made upgrade, it started giving me the error. react-native version 0.63.3 I have index.tsx in my root…
Musie
  • 113
  • 6
2
votes
1 answer

Separating a sentence word by word with JavaScript (client)

I'm trying to separate a sentence word by word but it seems like it is a very hard task with JavaScript. I can't simply separate the sentence by looking at the whitespace. Because there are languages (Thai, Chinese, Japanese, etc.) that don't use…
batatop
  • 979
  • 2
  • 14
  • 31
2
votes
1 answer

React-intl parse json array in locale file

I'm currently working with React-intl v. ^4.7.6. I have a folder called translations where all my locale translations are in. I use IntlProvider to select which file to load based on the user's browser. It seems like FormatttedMessage or…
bobob
  • 103
  • 1
  • 9
2
votes
1 answer

Run function on React.Intl

I am trying to run a function to do further string manipulation on the result of the FormattedMessage. I cannot find a way even after running it through a function as below :
Afshin Ghazi
  • 2,784
  • 4
  • 23
  • 37
2
votes
1 answer

How do I configure react-intl to have all dialect locales fall back to their parent language?

I've built a site that translates nicely between en and zh locales, using a select element. Now, I'd like to have my code choose the initial locale based on the value of navigator.language. This led to my realization that my locale is en-US, not en.…
carpiediem
  • 1,918
  • 22
  • 41
2
votes
1 answer

Intl.NumberFormat is not working properly in IE11?

I am using Intl library of native Javascript to show formatted number in English and Chinese. It is working properly in Chrome, but it is not working in IE11. For English locale following is the code and output: new Intl.NumberFormat('en-GB', {…
user1441238
  • 165
  • 1
  • 2
  • 10
2
votes
1 answer

FormattedHTMLMessage not working after package-update (looking for alternative/fix)

We have recently updated our website's npm packages (react-intl version 4.5.1) and we are using react-intl. The problem is, that we used the FormattedHTMLMessage component which doesn't seem to be working anymore. If I visit the page now there are …
stef000
  • 123
  • 2
  • 9
2
votes
0 answers

Casing of react-intl does not match the underlying filesystem

Current behavior import { FormattedMessage } from 'react-intl throws eslint error module "/node_modules/react-intl/lib/react-intl" Casing of react-intl does not match the underlying filesystem.eslint(import/no-unresolved) This wasn't…
Henry
  • 351
  • 3
  • 12
2
votes
1 answer

How do I use formatJS/CLI with create-react-app

Really dumb question - what's the correct glob format? I'm trying to run formatjs extract ./src/**/*.js But it's only going one level deep.
Adam Jenkins
  • 51,445
  • 11
  • 72
  • 100
1 2 3
…
26 27