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

'_isMockFunction' of undefined

const spy = jest.spyOn(CardResult.prototype, 'expandAnswers'); const wrapper = mount(
oav
  • 51
  • 1
  • 3
5
votes
3 answers

how to make a message without wrapping in span in react-intl

i have a problem with yahoo/react-intl thats i want to make messages in string type but when im using FormattedMessage it gives me message wrapped in span and thats not cool. i tried formatMessage and that not working too. i be very thankful for…
Hamid Akhavan
  • 61
  • 1
  • 2
5
votes
3 answers

How to access the IntlProvider's locale and messages in a component?

So my index.js has something like this: import trFi from './translations/fi_FI.json'; import trSv from './translations/sv_SE.json'; ReactDOM.render( …
Markus Meskanen
  • 19,939
  • 18
  • 80
  • 119
5
votes
0 answers

Edge and IE won't display USD/CAD currency symbols when using Intl.NumberFormat

Sorry if this has been asked but I couldn't find anything... The following code in Chrome, Firefox, etc, will return a currency symbol of 'US$': new Intl.NumberFormat('en-CA', { style: 'currency', currencyDisplay: 'symbol', currency:…
Kirsten
  • 51
  • 4
5
votes
2 answers

babel-plugin-react-intl: Extract strings to a single file

Currently while using babel-plugin-react-intl, separate json for every component is created with 'id', 'description' and 'defaultMessage'. What I need is that only a single json to be created which contains a single object with all the 'id' as the…
iamsaksham
  • 2,879
  • 4
  • 26
  • 50
4
votes
1 answer

If/else in FormatJS / React-intl

Is it possible to have an if/else in a FormatJS message? Example I have a boolean variable isDay that should determine what message is shown. When true I want to show the wording "Day" and when false I want to show Night. // message string message =…
Carlton
  • 531
  • 1
  • 5
  • 19
4
votes
0 answers

Is it possible to feed messages to react-intl by fetch/axios.get when application starting or when app is working on

Is any way to get and feed existing messages by axios.get or simple fetch. I have static translations in csv in project path but i have too csv translations from client in http web path. I want to get messages from static csv and then fetch file…
voltdev
  • 260
  • 1
  • 4
  • 9
4
votes
1 answer

How to implement i18n into a micro-frontend application using Module Federation

What would you recommend for implementing i18n in a module federation micro-frontend next.js app? At the moment (just starting) I got it working with react-intl by declaring the provider in the _app.tsx
gl0gl0
  • 255
  • 3
  • 7
4
votes
2 answers

FormattedHtmlMessage react-intl v4

After upgrading to react-intl@4, we are facing a problem with all formattedHtmlMessages which have been used as html tag. We tried replacing by formattedMessage and tried…
Noon
  • 139
  • 1
  • 3
  • 11
4
votes
2 answers

react-i18next and replacing placeholder keys with components

Previously I was using react-intl and was able to set placeholders for items which would be replaced with components, e.g. {br} with
. I'm currently getting errors when using react-i18next and i18next-icu where I'm trying to do: // Using Intl…
Matt Scheurich
  • 959
  • 2
  • 12
  • 24
4
votes
0 answers

Use of async/await to dynamically import the locales on addLocaleData

I have an 'external' intl provider because I have to handle some labels outside react components. I am trying to dynamically load the locales without using require statements and I am having a issue I am not sure why it's happening. So, the…
sergioviniciuss
  • 4,596
  • 3
  • 36
  • 50
4
votes
1 answer

Redux's combineReducers and TypeScript

I'd like to use react-intl-redux and redux-form in my react app but I have a trouble doing the right thing while using combineReducers. I've tried many things but still couldn't figure it out. react-intl-redux import { combineReducers } from…
Mehmet N. Yarar
  • 576
  • 9
  • 17
4
votes
1 answer

react-intl currency displayed without decimals

I have a requirement to display currency without decimals. We want the currency decorator ($), and the commas and spaces, as dictated by the locale, but no decimals. I've tried the maximumFractionDigits set to 0. That works, but removes the commas…
NotoriousWebmaster
  • 3,298
  • 7
  • 37
  • 49
4
votes
1 answer

Babel plugin development for react-intl

I noticed that there are some performance gain opportunities for react-intl after comparing intl.formatMessage({ id: 'section.someid' }) vs intl.messages['section.someid']. See more here: https://github.com/yahoo/react-intl/issues/1044 The second is…
Gustavo Huffenbacher Daud
  • 185
  • 2
  • 10
4
votes
1 answer

Rendering a backslash from react-intl message when building with Webpack 1

Summary When I load my app using Webpack Dev Server, my messages show up fine: \. However when I bundle the application to disk and server the bundle via nginx, I see a duplication of my backslash: \\. Details I am using react-intl@2.2.3…
robert
  • 5,093
  • 2
  • 20
  • 21
1 2 3
…
26 27