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

React: update URL query params on language change

I am building a multilingual website and need to display currently selected language in URL query params (not only the language but for the sake of KISS I will consider only this). I'm using react-intl for website translation as well as store…
John Nash
  • 127
  • 6
0
votes
1 answer

mock for react-intl with using useIntl

I'm using useIntl hook in my component. In my test I mock useIntl in file react-intl.js in src/mocks directory. Also in this file, I mock defineMessages, that are used in many other components. The part of mock with defineMessages in…
user13004348
0
votes
1 answer

How to translate the menu navbar in core ui react?

I am using the admin template for react : coreui. To translate my labels in the component, I am using react-intl. I would like to translate the navbar which is a simple array like that : export default { items: [ { title: true, …
Dom
  • 2,984
  • 3
  • 34
  • 64
0
votes
1 answer

How can I access intl.formatMessage() in mobx store in reactJS app?

I have two JSON files with names 'en.json' and 'fr.json' which has all the translations. en.json { "General.LearnMore": "Learn More" } I have a mobx store (.ts file) and I want to access intl.formatMessage() in that class. It is easier in functional…
newbie
  • 530
  • 1
  • 9
  • 36
0
votes
2 answers

TypeError: intlProvider.getChildContext is not a function

I'm using injectIntl in my react functional component to achieve the localization. I'm using enzyme/jest to do the unit test. I've copied the intl-test-helper file, but got error: " TypeError: intlProvider.getChildContext is not a function " I've…
Lei
  • 11
  • 1
  • 3
0
votes
0 answers

Brazil DST no longer in use 2020 - intl.DateTimeFormat returns incorrect UCT date in Chrome

Different Browsers are returning different dates for the same intl.DateTimeFormat function. Brazil are not following Daylight saving this year…
0
votes
1 answer

How to polyfill FormattedDate on SSR?

The problem is that FormattedDate from react-intl generates one content on SSR and another one on client side. I took for example this project to demonstrate error: https://github.com/weiliang903/react-intl-with-next From SSR I'll get 'Tue, Oct 15'…
NooNoo
  • 83
  • 1
  • 1
  • 4
0
votes
1 answer

react-intl: change div direction based on current locale

So, here is my App component: const App = () => { const [lang, setLang] = useState("en"); return (
Hans
  • 2,674
  • 4
  • 25
  • 48
0
votes
1 answer

How can we use a language which is not listed in react-intl?

I am unable to find language code "ch", or to be more generic can we use our own language with react-intl As a work around, i used another language's local data for warping
0
votes
0 answers

Multible languages in the same page

I have pages with multible languages English/Arabic for instance when using typography. fontFamily property it applies the same font for both languages is there a good/easy way to apply different fonts depending on elements language i don't have…
0
votes
2 answers

React-Intl and JSON - Can I use multiple keys in one string?

I'd like to use React-Intl library, to i18n our app. Probably we'll use json format from weblate, and there is a main question. Can I use couple translation keys into one single string? Dont get it? No problem, there is an example. { "test1":…
0
votes
1 answer

React-intl not working from Link component

I getting error multi language redirect click Link component but I press F5 it's works. How to fix this error. Help me! I press F5 it's works It getting…
Quang Duy
  • 3
  • 5
0
votes
1 answer

Why React-intl not working inside ant-design?

FormattedMessage not working inside Form.Item element of ant-design, if FormattedMessage outside Form.Item element working well. Help me! FormattedMessage outside Form.Item element working well
Quang Duy
  • 3
  • 5
0
votes
1 answer

Can react-intl pluralize a completely different message for certain numerical classes?

I'm considering to use react-intl to localize our react app and I'm pondering the the following messages You can put 3 more items in your basket You can put 2 more items in your basket You can put 1 more item in your basket Your basket is…
Caius Jard
  • 72,509
  • 5
  • 49
  • 80
0
votes
1 answer

display regular date for FormattedRelative

I want to display friendly format date just like whatsapp and telegram do. For example, for today's date it shows "today" and yesterday date it shows "yesterday". But I don't want to show three days before as "3 days ago". It should be the regular…
Muhaimin CS
  • 195
  • 2
  • 19