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

react-intl shows warning when using defaultRichTextElements after compiling messages

I have a project created with create-react-app with typescript. I have been struggling with the best way to organize my messages. This is my approach: I have compiled messages in /messages/en.json. { "a.hello": "hello", "a.world":…
javifm
  • 705
  • 4
  • 9
  • 20
0
votes
0 answers

got production error after upgrade React-Intl, Could not find required `intl` object. needs to exist in the component ancestry

I know, some other questions already on this, but none of them discuss about production env, only testing component, my question is about production environment. So, after upgrade react-intl i got this error: Uncaught Error: [React Intl] Could not…
Afif Abdillah
  • 1
  • 1
  • 4
0
votes
1 answer

Use of variables in keys instead of hard-coded value react-intl-universal-extract

How do you extract default messages with variables or constants in the key or .get() Example of message to extract

{ intl .get(`${PREFIX}.personal-form.name-field`) .defaultMessage('First name') }

Running…
Tassisto
  • 9,877
  • 28
  • 100
  • 157
0
votes
0 answers

React Intl's FormatedMessage not taking id as a variable

This way it's working This way it's not >< Throwing this error : Uncaught Invariant Violation: [React Intl] An id must be provided to format a message. When I…
JolHaricot
  • 23
  • 5
0
votes
1 answer

FormattedTime component throwing error when mounted in unit test

I am working on implementing a unit test for a custom React hook that utilizes the react-intl component FormattedTime. Unfortunately, I am having trouble getting past the following error when mounted: [Error: FormattedTime(...): Nothing was…
cfnerd
  • 3,658
  • 12
  • 32
  • 44
0
votes
1 answer

Any way to pluralize with translations using formatjs?

I originally misunderstood the usage of , as it seems it's only used for single-language applications. Is there a way to pluralize message that use translations as well? For example, we have a simple line of code saying something like…
kastaplastislife
  • 293
  • 2
  • 16
0
votes
1 answer

Is there any default method available to change month string which is coming from Intl.DateTimeFormat in javascript?

Is there a way to change month title Jänner to Janner while using below code? var date = new Date(Date.UTC(2020, 0, 20, 3, 23, 16, 738)); console.log(new Intl.DateTimeFormat('de-at', { month: 'long' }).format(date)); date = new Date(Date.UTC(2020,…
Harsh Shah
  • 41
  • 4
0
votes
1 answer

React+TS+i18n, How to test a component wrapped with react-intl

The component looks like const Title = (props: TitleProps) => { return (
{props.title} : {props.date} …
wtf512
  • 4,487
  • 9
  • 33
  • 55
0
votes
0 answers

ReactIntl: How to use ReactIntl's tag inside const?

const HEADER = [ {label: "NAME", key: "name"}, {label: "NUMBER", key: "mobilenumber"} ]; I'm implementing React-intl on my existing react application. whereas in my application, there are some table headers dynamically coming from the const. Is…
User_28
  • 55
  • 1
  • 2
  • 9
0
votes
1 answer

Typescript for defineMessages in react-intl package

The react-intl package has a defineMessages method for defining the messages for translation in the format: const messages = defineMessages({ 'account.activation.error': { id: 'account.activation.error', defaultMessage: 'This…
JoeTidee
  • 24,754
  • 25
  • 104
  • 149
0
votes
1 answer

How to retain order of translations with FormatJS CLI?

When the messages are extracted they are ordered in the extraction file alphabetically according to their randomly generated ids. Is there any way to prevent that and have them ordered in the exact same order in which they appear in the code…
Faire
  • 706
  • 1
  • 9
  • 31
0
votes
1 answer

How to use code splitting on a ressouce (.json, .csv, etc.) with React

Issue: I am using react-intl and I would like to load the language-related JSON file only when it is needed, in brief to lazy load it. Documentation : https://reactjs.org/docs/code-splitting.html the problem here is I wish to lazy load a JSON file…
SylwekFr
  • 308
  • 3
  • 21
0
votes
2 answers

Integrate react-intl with react-table

I am using react-intl for translations throughout my app. I am now trying to use a translated message as Header of a table using react-table in the following way: { Header: , …
MMXX11
  • 127
  • 3
  • 12
0
votes
1 answer

Convert an array to a component in React

In the project there is an array of objects used for populating the breadcrumb: export const BREADCRUMBS_LIST = [ { label: 'Home', path: '/', active: false }, { label: 'Account', path: '/accounts', active: false }, { label: 'This Account',…
Leo Messi
  • 5,157
  • 14
  • 63
  • 125
0
votes
1 answer

React-intl v5 error when loading a package with react-intl v2

I have a React App with react-intl v2, and I want to migrate it to v5. In our node_modules folder we have a dependency with a package that has react-intl v2. I upgraded the React App to use react-intl v5 and it works fine (The whole App is wrapped…
AlbertMunichMar
  • 1,680
  • 5
  • 25
  • 49
1 2 3
…
26 27