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

Does React-intl support converting country names based on location?

I am trying to display a list of country names based on locale. For instance, let's say we have a list of countries as the following: United States, China, Japan, and France. and you are a customer that browsing my website. If your account's locale…
Max Doung
  • 221
  • 3
  • 14
3
votes
1 answer

How to translate (i18n) error messages in actions with React, React Intl and Redux?

I've a performLogin action, which triggers an API and tries to authenticate a user with the provided credentials. This API call can lead to errors. Her is my action: export const performLogin = (email: string, password: string) => { return…
Robin
  • 8,162
  • 7
  • 56
  • 101
3
votes
0 answers

react-intl composite message

I'm struggling to work out the best way to structure messages whereby one of the dynamic values also needs a translation. For example if I have the message 'Type in Spanish...' I would like to use this message in every different combination for all…
djskinner
  • 8,035
  • 4
  • 49
  • 72
3
votes
2 answers

Checking if a message is empty with React Intl and Typescript

I have an app which uses React Intl and TypeScript. I want to display a box with some info text, and I want it to be shown only if the text actually exists. But I cannot do because if my.id doesn't have a value,…
Vegard Stikbakke
  • 749
  • 1
  • 7
  • 21
3
votes
1 answer

Intl.DateTimeFormat produces wrong format

In current Chrome, Firefox and Safari Intl.DateTimeFormat for the locale it-CH (italian part of Switzerland) is wrong: new window.Intl.DateTimeFormat('it-CH').format(new Date()) // -> "6/7/2017" new window.Intl.DateTimeFormat('fr-CH').format(new…
jbandi
  • 17,499
  • 9
  • 69
  • 81
3
votes
2 answers

How to call the formatMessage() to load the messages from the .json files

I'm trying to call the formatMessage() API directly outside the comp w/o using the standard component. const locale = 'en'; const messages= defineMessages({ greeting: { id: 'app.greeting', message:"some…
user1234
  • 3,000
  • 4
  • 50
  • 102
3
votes
1 answer

Using react-intl with react-bootstrap

I've got a templated TextAreaField that uses FormControl from react-bootstrap to give it the nice bootstrap look and feel. I'm wanting to be able to use internationalised messages via react-intl. It works for all the components outside the…
alt
  • 2,356
  • 2
  • 21
  • 28
3
votes
1 answer

React-intl disable react-router's Link component onClick event on Safari v8.0.8

I'm working on a react universal application who is rendered server side and client side. The application works #1 on Chrome, but on Safari, the react-router's Link just re-render the whole application and do an http request. The application render…
Crak_mboutin
  • 1,046
  • 2
  • 12
  • 18
3
votes
1 answer

How to change the display format of date in react-intl?

I need to display the date using different separators using react-intl. So far I have this const date = new Date("2016-08-12T16:59:02.013+02:00"); ... return() { render(
Helena
  • 921
  • 1
  • 15
  • 24
3
votes
3 answers

Rerendering React components after redux state's locale has updated

I've implemented Redux in my React application, and so far this is working great, but I have a little question. I have an option in my navbar to change the locale, stored in redux's state. When I change it, I expect every component to rerender to…
adrienharnay
  • 795
  • 2
  • 9
  • 27
3
votes
2 answers

Local Dates in Node react-intl

I am trying to set up i18n on a React App using react-intl. The app is universal rendered (so on both client and server using node). A basic example of what I have is this: import React, {Component} from 'react'; import ReactDOM from…
jamie holliday
  • 1,617
  • 9
  • 26
  • 39
3
votes
0 answers

react-intl stopped working "Missing locale data for locale"

I have code for last 2 months and everything worked fine until few days back, I removed all my modules and did npm install again. Now react-intl started throwing an error when I change language in my dropdown. In my App.js I have something like…
Markuz Shultz
  • 678
  • 3
  • 9
  • 22
3
votes
2 answers

My redux-form is reinitialized when switching language by changing react-intl wrapper props

I'm wrapping my app inside an IntlProvider from react-intl v2, like this: And I have my react-form forms down the tree. Everything is great. But if I'm starting to fill up a…
Antoine
  • 5,504
  • 5
  • 33
  • 54
2
votes
0 answers

How to make translations working in both server and client components without URL params using browserlanguage in next Js 13 with app directory

I am trying to use react-intl for this but not sure how to set up my middleware to detect the browser language and set the translations of pages according to it insted of using dynamic url for translating my page TranslationProvider.tsx "use…
Keshav Tomar
  • 31
  • 1
2
votes
1 answer

IntlProvider not injecting ids on FormattedMessage

I'm following the guide here to setup automatic id generation for FormattedMessage components under the IntlProvider but it doesn't appear to be injecting the ids at run time since I'm receiving this error in the console. An `id` must be provided…
xzist
  • 45
  • 1
  • 1
  • 6
1 2 3
…
26 27