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

Set the defaultMessage to look at "en-US" if the current locale is missing entry

Rather than specify a defaultMessage for every FormattedMessage, it would be nice to set the defaultMessage to always be that of a particular language. We know we are always going to have English translations for everything. Specifically I'd like to…
Lars
  • 9,976
  • 4
  • 34
  • 40
0
votes
1 answer

react intl returns error while using formaMessage

i've searched more than 2 days for a solution, but didn't find any. I'm trying to use react-intl inside of a select-Tag and I know, that i can't use . I have to use formattedMessage. Here is the code: contact.jsx import React, {…
SacrumDeus
  • 156
  • 1
  • 13
0
votes
1 answer

Missing message: "app.homepage.title" for locale: "it", using default message as fallback

I have react-intl set up on my webpage and I have verified that my intl prop contains the following: { locale: 'it', messages: { it: { app.homepage.title: 'Casa' } } } Yes I get the error message: [React…
K G
  • 1,715
  • 6
  • 21
  • 29
0
votes
1 answer

Pass translated text as a prop

For localization, I am using React-intl. I am exporting below(intl.js) - import { injectIntl } from 'react-intl'; const Intl = injectIntl(({ intl, children }: any) => children(intl)); const t = ( id: string | Array, values: Object |…
0
votes
0 answers

Dynamically generate single JSON by merging small module JSON files ReactJS React-Intl

I am working on the React-intl for the language translation. I have configured React-inlt in my application, it's working for the single login module. I have a separate language constant file for each module (Login, Register, Dashboard etc). I need…
Ramesh Lamani
  • 1,117
  • 3
  • 25
  • 54
0
votes
1 answer

How to translate errors which occurs in redux-saga?

I have a question, how to translate errors which are catch in redux-saga. How are you doing it in React-Redux? I am trying to do it like this: catch (error) { if(error.response.payload.error==='Unauthorized'){ Alert.error(
PrEto
  • 395
  • 2
  • 7
  • 23
0
votes
1 answer

expo react-native react-navigation react-intl how to trigger an update to the messages once the user locale is resolved

I am using expo, react-native, redux, react-navigation, and react-intl. Expo has this async Localization.getCurrentLocaleAsync() function to retrieve the locale asynchronously. I encountered problem propagating changes of locale and messages down to…
WABBIT0111
  • 2,233
  • 2
  • 18
  • 30
0
votes
1 answer

Using react components in string for react-intl-universal

Trying to use Link within an i18n string but it doesn't read the Link component properly. How do you include react components in react-intl-universal? language json file { "somekey": "some" } javascript import {…
Stanley
  • 2,798
  • 5
  • 22
  • 44
0
votes
1 answer

Identifier is not a camel case

I have to import from a module and I have an error Identifier 'locale_en' is not in camel case. How can I do to resolve this. import locale_en from 'react-intl/locale-data/en' I use the module 'react-intl' and I try to add this : camelcase:…
Monsieur Sam
  • 333
  • 1
  • 6
  • 20
0
votes
1 answer

validateDOMNesting(...): cannot appear as a child of

I am using react-intl for internalization. I am getting the error validateDOMNesting(...): cannot appear as a child of
Sourabh Banka
  • 1,080
  • 3
  • 24
  • 48
0
votes
1 answer

i18n in react-alert-template-basic

In my application I am using react-alert-template-basic to show alerts. In the API I write the texts directly, like: this.props.alert.error(''); Now, I want to i18n the text. After a quick search, I found that react-intl is one of the…
Andrés
  • 719
  • 1
  • 4
  • 21
0
votes
1 answer

I18n Internalization in react for english and hindi

I am building a single page application using React. I want my website to be available in both the hindi and english language. So, for that I think I have to use react-intl. Okay but how can I make this work? I read a few tutorial but I did not find…
Sourabh Banka
  • 1,080
  • 3
  • 24
  • 48
0
votes
1 answer

React-Intl injectIntl not working with mergeProps

I have the following code which works fine module.exports = injectIntl(redux.connect(mapStateToProps, mapDispatchToProps)(props => { document.title = props.intl.formatMessage({ id: "app-name" }); return (); })); When I…
Brandon McAlees
  • 715
  • 2
  • 12
  • 28
0
votes
1 answer

How to pass currency as argument?

I've got my custom formats { number: { USD: { style: 'currency', currency: 'USD', }, EUR: { style: 'currency', currency: 'EUR', }, }, } and I want to create an ICU message so that I could pass…
lukasbalaz7
  • 360
  • 2
  • 11
0
votes
2 answers

How to use react, router, redux, and react-intl together?

We have been using react, react router, and redux. Now we want to add injectIntl. I am getting a problem with my syntax and hoping you could help. import React, { Fragment } from 'react'; import { withRouter } from 'react-router-dom'; import {…
Jason Hocker
  • 6,879
  • 9
  • 46
  • 79