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

changing the decimal point for a specific language

we are using the react-intl (ver 5.21) to display currency. the result will be: 123.45 But if let say I want to change the decimal separator for en-us to be , (comma): 123,45 Is it possible in global scope? I cannot change the local and must send…
Itai
  • 46
  • 2
0
votes
0 answers

React Intl: Could not find required `intl` object. needs to exist in the component ancestry

I changed my project folder structure and had to remove node_modules and reinstall. Since then, I'm getting the dreaded [React Intl] Could not find required intl object. needs to exist in the component ancestry. error message. I went…
Eric Mitjans
  • 2,149
  • 5
  • 40
  • 69
0
votes
0 answers

Extracting messages with react-intl and babel-plugin-formatjs doesn't work when default messages are variables

In a CRA project, I am trying to use react-intl and extract all the messages used in all the components following the documentation, with babel-plugin-formatjs and @formatjs/cli . The extraction works basically, but the…
noriktal
  • 73
  • 1
  • 6
0
votes
0 answers

How do I provide my own message source to react-intl

I have an Ember application with some React components in it. Some of the components expect to be wrapped in an IntlProvider. I'd like to create a subclass/replacement IntlProvider that, instead of looking in an array of messages for a translation,…
MikeS
  • 65
  • 10
0
votes
1 answer

How to internationalize a Select Menu

In my React application with Antd internationalized with react-intl I have a select component as follows, but when the page language is changed the select options do not change language. const TicketCategorySelect: React.FC = () => { const intl =…
jesusrlm
  • 35
  • 8
0
votes
1 answer

react-intl FormattedMessage

I'm using the react-intl library in my app, and I'm encountering an issue where letters inside parentheses () are being capitalized in my FormattedMessage component. For example, if I define the defaultMessage prop as follows:
Zvart
  • 1
0
votes
1 answer

How to make WebHint treat React-Intl as proper

When using the WebHint VSCode extension with React code, I often have this false positive issue: Buttons must have discernible text: Element has no title attribute webhint(axe/name-role-value) With JSX such as: function MyButton({ labelId, onClick…
Valentin
  • 10,769
  • 2
  • 17
  • 27
0
votes
1 answer

How to override the currency symbol used by Intl.NumberFormat

I am using the Intl.NumberFormat to format currencies on a web page, but I want to use specific currency symbols instead of the locale defined ones. To be more specific, I want to show C$ for Canadian dollars, instead of the standard $, even though…
paulodiovani
  • 1,208
  • 2
  • 16
  • 34
0
votes
0 answers

Integrate "react-intl" langage locale with switcher in storybook

I am trying to include langage locale support from my React components in Storybook using "react-intl", I added the following global types in "preview.js" as list of Languages supported to appear in the Storybook toolbar: export const globalTypes =…
tlaesus
  • 197
  • 3
  • 13
0
votes
1 answer

How to solve "expression of type 'string' can't be used to index type"

I try to migrate a webseite from React to Next.js, but struggeling to implement i18n for SSR-pages. At the moment I try to follow this tutorial here: https://localizely.com/blog/nextjs-i18n-tutorial/ I've already created an lang-folder and put some…
Valentin Marolf
  • 3
  • 2
0
votes
0 answers

How can I check if my react-intl messages are consistent with my en-US locale?

I want to have some type of script that will check if all the formattedMessage I have in my React components are consistent with the data I have in my en-US.json locale. I'm using react-intl, and in my React components I use both the…
Emily
  • 33
  • 3
0
votes
1 answer

Incorrect translations when implementing pluralization in ICU message format. I'm using react-intl (format.js)

It seems like using pluralization in ICU message format is not dependable when combined with static text. Take the following example: Please see the {itemCount, plural, one {message} other {messages} } in your inbox. In Spanish, the word "the"…
dcporter7
  • 535
  • 3
  • 14
0
votes
0 answers

React-intl defineMessage type assertion

We use enums for hooks to ingest in our messages files. It looks like this: import { defineMessages } from 'react-intl'; export enum SettingsMessages { Settings = 'app.views.settings.title', } export default defineMessages({ settings: { …
Bobby Gagnon
  • 80
  • 2
  • 11
0
votes
0 answers

Migrating FormattedHTMLMessage to FormattedMessage - react-intl

We've migrated from version ~3 to version 6.2.5. Currently stuck at migrating the FormattedHTMLMessage component from this: to this:
mmozedev
  • 25
  • 5
0
votes
0 answers

React-intl change message property after some time

I implemented React-Intl in my project. Everything is set up. My index.ts looks like this: const container = document.getElementById('root'); const root = createRoot(container!); const lang = Cookies.get('bee-lang') || 'pl'; let messages; void…
Paweł Jakubowski
  • 11
  • 3
1 2 3
…
26 27