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

Access nested values in FormattedMessage

Trying to get the following to work, but it seems that react-intl doesn't support it. Curious to know if there are any alternatives? Seems like it might be a common probably
Adam Jenkins
  • 51,445
  • 11
  • 72
  • 100
0
votes
1 answer

How to convert object into Number or string using FormattedNumber to render in react tooltip using REACTJs?

I am trying to make a application which supports multi language for this Im using react-intl which translates the data. While doing this Im facing a problem that when I am trying to translate it returns me as [OBJECT OBJECT] but im…
0
votes
1 answer

formatHTMLMesssage() function in React not rendering special characters

below is my code: T_TEXT_TOOL_TITLE=Some Text to show' When rendering the above component in the UI, the formatHTMLMessage function do not…
0
votes
0 answers

react-intl language switcher does not update Formattedmessage in grand-child component

So I've started using react-intl in an older react-project (don't judge please). In index.js I change the state to the selected language: import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as…
ekclone
  • 1,030
  • 2
  • 17
  • 39
0
votes
1 answer

react-intl, async translation import and SSR

I have a React app which uses react-intl to provide translations and it's working fine for browser DOM rendering. I have a component which deals with async locale/translation based on props it receives, using import() and then once locale +…
cloakedninjas
  • 4,007
  • 2
  • 31
  • 45
0
votes
0 answers

Components sometimes won't load

We have menu, and when someone clicks on button new component should load, but that doesn't happen every time. Basically we have 2 Browserouters. 1 in App.js where Intlprovider is and one in Home.js where menu is. I will provide the code down here.…
0
votes
1 answer

Messages must be statically evaluate-able for extraction, on class

I need to add formattedMessages, on a method on a React class. We normally use injectIntl with a HOC and it works, but I am on a React class, and i've tried many things but still get the error: Messages must be statically evaluate-able for…
user2643810
0
votes
2 answers

How to reset (or destroy) redux-form only when route changes and keep on language switch?

I create registration/login/forgot-password forms using redux-form. Also I use react-intl for multilingual support. Changing language causes rerender of components and resets the forms. I would like to reset form only when location is changed, but…
0
votes
1 answer

React intl template string throws a missed id warning

I'm trying to inject some values into translated sentence via react-intl. Following official documentation I was able to define some template message into my Localization file and it looks like that. ratingMsgTemplate: { id: "_ratingMsg", …
Velidan
  • 5,526
  • 10
  • 48
  • 86
0
votes
1 answer

React intel and i18next React-Native

I am building a multi language app with React-Native, I am little confuse about to choose the Internationalisation library and confusion is between two Libraries One is React-intel and other is React-i18next i talk about this with multiple…
Waheed Akhtar
  • 3,110
  • 1
  • 16
  • 30
0
votes
3 answers

React Intl- Cannot read property 'formatMessage' of undefined

.... const func1 = (intl) => { const text = intl.formatMessage({id: 'mesage'}); const func2 = () => { return {
..... placeholder={text}
}; }; return {
..... {func2()}
}; }; export…
user9081274
  • 33
  • 1
  • 6
0
votes
1 answer

Can not compose withStyle, withWidth and injectIntl

I'm trying to compose different HOC coming from Material-Ui and react-intl, but that failed> I tried export default compose( withStyles(styles), withWidth(), )(injectIntl(NavBar)); and export default compose( withStyles(styles), …
Jerome
  • 2,429
  • 2
  • 22
  • 37
0
votes
2 answers

FormattedMessage with defaultMessage shows error on console

The application I'm working on with has the option to add custom fields for a expecifc form and those fields does not support internationalization. However due to Components on our project, even after adding defaultMessage on FormattedMessage, we're…
Gabriel Brito
  • 1,003
  • 2
  • 16
  • 26
0
votes
1 answer

using react-intl, but return value is escaped

I've search an answer to this question and couldn't find a good answer Im tring to have some formatting in my app and I'm using react-intl. The app looks like this:
OferP
  • 373
  • 2
  • 15
0
votes
2 answers

react-intl: How can update child component without passing "this.props.intl"

When i change language object using intl library from parent component then i need to pass intl={this.props.intl} to child component for update. i am using FormattedMessage id="example" or this.props.intl.formatMessage({ id: "example" }). i have a…