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
2 answers

Using React-Intl in NodeJS

I develop an app which uses ReactJS on frontend and NodeJS on backend, and I'm new to internationalization and i18n. I want my translation JSON files used both in client and server side, when I return an error in NodeJS I want to be able…
Bulent Balci
  • 644
  • 5
  • 11
2
votes
1 answer

i18n message extraction in CRA using TypeScript

I'm trying to get i18n message extracted (defined by react-intl's defineMessages) to work properly in a CRA using TypeScript. I've got an existing react app bootstrapped by CRA with a couple of hundrets of lines of code. So rewriting the application…
2
votes
1 answer

How to fix eslint failure when requiring a file with dynamic path inside a function?

I need to use react-int outside a component and particularly inside an util file. In order to accomplish that i'am using this code https://gist.github.com/genadyp/435f4e264cb6e377836cf63bee8987d8 But i am facing an issue with eslint that fails and…
user2222
  • 444
  • 2
  • 8
  • 18
2
votes
1 answer

How to convert object into string using FormattedMessage to render labels in d3.js chart 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 expecting a…
2
votes
1 answer

How to set locale to child locals (e.g. en-GB, en-US or fr-CA) with locales in react-intl v2

I am trying to use react-intl in order to localise a react app. It is set up and works with all parent locales such as EN, DE, FR etc. I can view the child locales such as en-GB and en-US, however, I cannot display them in the browser. This is how…
Ell
  • 51
  • 6
2
votes
0 answers

React HoC inject props with typescript

I have a react HoC which is add two params (function to translate and current locale) into component props. It's works good. But i start rewrite project with TypeScript, and i have no idea how to do that. My point is very similar as…
2
votes
1 answer

using react-intl to translate a message key outside a component

I'm using the react-intl library for internationalization. Inside a component, I use the injectIntl HOC to translate message keys: import {injectIntl} from 'react-intl'; const Component = props => ( const message = props.intl.formatMessage({id:…
Dónal
  • 185,044
  • 174
  • 569
  • 824
2
votes
1 answer

react-intl: TypeError: A message must be provided as a String or AST if using nested json messages

I see errors in the console when using react-intl with nested json messages: [React Intl] Error formatting message: "App.filter.dateRange" for locale: "en" TypeError: A message must be provided as a String or AST. But UI working correctly.…
trofivan
  • 61
  • 7
2
votes
1 answer

"babel-plugin-react-intl" is not working as expected

I have created my react app using create-react-app command. Now I would like to available my website in both hindi and english language. So for that I am using yahoo/react-intl. I have also installed the babel-plugin-react-intl plugin. Also added…
Sourabh Banka
  • 1,080
  • 3
  • 24
  • 48
2
votes
2 answers

react-intl - FormattedDate - DD/MM/YYYY instead of MM/DD/YYYY (for en-us!)

I have an application with react-intl injected. Its bilingual - in English and in Polish so i represent dates with . When I represent let's say 12 April 2005 its: 12.04.2005 in Polish 04/12/2005 in English It confuses everyone as people think…
jake-ferguson
  • 315
  • 3
  • 11
  • 32
2
votes
0 answers

Using react-intl to parse dates and numbers

The react-intl can format numbers based on locale. Now I am trying to add an input component in which users can enter number and it will be formatted to contain commas in appropriate places. For this in the handleChange, I want to parse this…
2
votes
1 answer

React-Intl: access formatMessage in nested component

The question is simple and Im can't believe I cant found a solution (without context) for a situation as simple as this. Im using react-intl. I have an App.jsx with a child component Index.jsx with a SideBar.jsx with a CreateNewSomething.jsx. In…
RetroMime
  • 387
  • 1
  • 8
  • 23
2
votes
1 answer

FormattedNumber in react-intl does not wrap currency to round bracket if it is negative in chrome

When i use FormattedNumber from react-intl to format currency, it won't format negative currency amount to have parenthesis around the currency in chrome. It does work in Internet Explorer but does not work in Chrome and Mozilla…
Dhiraj
  • 1,430
  • 11
  • 21
2
votes
0 answers

How to export React class getter with injectIntl?

This is my class: import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { injectIntl, intlShape } from 'react-intl'; class MyClass extends Component { constructor(props) { super(props); } get pageTitle() { …
Gaurav
  • 191
  • 18
2
votes
0 answers

react-intl with redux language swicher

I'm trying to make a language switcher with a react-inlt and redux, but when i try to switch, then view is not rendered (< FormattedMessage> dosen't change), but redux work and locale in < IntlProvider> is changed. I haven't got any error in chrome…
JanuszO
  • 1,140
  • 12
  • 25