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

Handling abbreviated numbers + pluralization w/ react-intl

I'd like to be able to display strings like "1,000 cars" as "1K cars" (if appropriate for the locale). Is there a way to handle this using react-intl? I'm still trying to wrap my head around the API and I'm not sure if this is something that a…
gxc
  • 4,946
  • 6
  • 37
  • 55
2
votes
1 answer

Get translation text without using FormattedMessage and React ContextTypes

I'm looking for a way to get translation text without using FormattedMessage. Until now, I've found only this solution that provides to use ContextTypes an React's EXPERIMENTAL feature. Are there others ways to accomplish this (or other…
Webman
  • 1,534
  • 3
  • 26
  • 48
1
vote
2 answers

Intl.NumberFormat returns different results between Safari and Chrome for exact same locale

Here's my test codes running from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat const number = 123456.789; const locale = new Intl.Locale('en-DE', { region: 'DE' }); console.log(new…
Mochi08
  • 167
  • 3
  • 15
1
vote
1 answer

Unable to change language of UI elements taken for Ant Design Pro table

I recently saw this npm package that I am fairly assuming is a part of the whole ant design pro library which gives us the pro table. I really liked the feature of showing/hiding columns on the go for pro table, but for my project I already have ant…
Rohit Kumar
  • 684
  • 2
  • 17
  • 39
1
vote
0 answers

react-intl - Custom date formatter

I would like to specify the date format based on what the user has selected. When defining the Intl object I can specify the values I would like to include for a date but I can't specify the ordering or exactly how I would like the date…
Michael
  • 3,411
  • 4
  • 25
  • 56
1
vote
1 answer

react-intl: formatMessage for array of string

I have several interfaces, and among these interfaces there is an interface for "displaying users", and there is a field called "Role", which represents an array of user roles, And I want to translate this column, and it was actually translated…
Hiba Youssef
  • 1,130
  • 1
  • 12
  • 34
1
vote
0 answers

Style a part of the defaultMessage in react-intl

I need some way to style a part of the defaultMessage in react-intl, the {Text_to_be_bold} needs to be bold but the rest of the text should stay as it is. Is there any support for that in react-intl or should I manage it manually? Thanks in…
Hayder Alraeai
  • 11
  • 3
1
vote
1 answer

What is the best way to build a multi-languages website with React

I want to build a multi-languages website using react and nodejs, so, I'm asking about the best external module to use and the way to implement it. Comparing @lingui/core vs. i18n vs. i18next vs. react-i18next vs. react-intl
Nabil YAHYAOUI
  • 11
  • 1
1
vote
0 answers

react-intl FormattedDate component giving Invalid Date changed to en-GB locale

I have my date formatted like this let formattedDate = new Date(updated_at).toLocaleDateString('en-US', { timeZone: 'UTC' }) Then I have the FormattedDate component from 'react-intl' package used like this
Recharge Gomez
  • 33
  • 5
1
vote
1 answer

react-intl provider in parent package

I have a react project "App" that requires another package "AppComponents" which in turn requires "UI" package. App (has Intlprovider) => AppComponents (useIntl works) => UI (useIntl does not work) I added the Intl Provider in "App", and when I…
Louai Baydoun
  • 11
  • 1
1
vote
1 answer

Is it possible to translate pseudo element as css content with React Intl?

I need some help. I'm new to React and I'm trying to translate app with ReactIntl and FormattedMessage. My question is: "Can I translate content of css pseudo element ::before, that is located in my App.css file?" And if it's possible, how? :-) …
Danijela_
  • 13
  • 4
1
vote
0 answers

Error: [@formatjs/intl Error MISSING_DATA] Missing locale data

My project that I am working on is using @formatjs/intl library. And one of the used locales is non existing 'la' locale. I need to figure out a workaround for this locale, the best way would be to somehow set that 'la' locale would use existing…
Chopin Nocturnes
  • 11
  • 2
1
vote
1 answer

React-intl with a custom react components library

I'm having a hard time to create a react library that supports translations. Let's say I have this structure components |- Button1 |- Button1.tsx |- index.ts |- Button2 |- Button2.tsx |- index.ts lang |- en.json what I want is, when…
Petr Schukin
  • 170
  • 2
  • 12
1
vote
0 answers

How to retrieve a translated, formatted message as string from react-intl in saga

I need to provide a translated string to a saga. Simplified, I now have: export function* createAppointment(action){ yield put({ type: ACTION_REQUESTED, data: { content: 'Creating appointment', key: 'appointment' }}); try { yield…
berkes
  • 26,996
  • 27
  • 115
  • 206
1
vote
0 answers

Storybook in React project display keys of the translations, not the values

I'm using "@storybook/react": "~6.3.12" and "react-intl": "^2.8.0" in my React project. However, I'm stuck with a problem, that I'm not getting translation values of keys in JSON files. Already tried "storybook-addon-intl": "^2.4.1" and…
Ati
  • 304
  • 3
  • 14
1 2 3
…
26 27