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.
332 questions
11
votes
4 answers

React-intl, use api with Typescript

I would like to use the formatMessage function of the react-intl API to insert a message as placeholder, but I can't figure out the right way to access this function. Here is a simplified version of what I have : //index.tsx
Emarco
  • 945
  • 3
  • 8
  • 21
10
votes
3 answers

React-intl define messages outside of react

I have utils.js file. export function categoryIdToCategoryName(categoryId) { let name; switch (categoryId) { case constants.RISK_CATEGORY_LOW: name = 'low'; break; case constants.RISK_CATEGORY_MEDIUM: name =…
Vladimír Volek
  • 425
  • 4
  • 19
9
votes
4 answers

Using Intl properly in Android React Native app

I'm trying to use number formatter of Intl, which works perfectly on iOS and when debugger is attached to either iOS or Android, but only fails on Android without debugger attached due to outdated JSC in Android. After a bit research I've found two…
Can Poyrazoğlu
  • 29,145
  • 40
  • 152
  • 327
8
votes
0 answers

react-intl with react-testing-library gives Invalid hook call error

in our project we use react-intl for internationalisation. We are using jest as the testing framework and we decided to move our unit test utility library from enzyme to react-testing-library. But now, since there is no shallow rendering, I have to…
onuriltan
  • 2,682
  • 2
  • 13
  • 26
8
votes
1 answer

Dynamically import language json file for react / react-intl

This is the way I configure my client to render the proper language through react-intl. import localeData from './translations/en.json'; //import localeData from './translations/xx.json'; <-- any language const render = routes => { match({…
Yen Sheng
  • 517
  • 1
  • 6
  • 23
8
votes
1 answer

Manual mock React-Intl with Jest to have snapshot testing

I have been struggling mocking React-Intl library with Jest because I'm having this error when I run tests: Invariant Violation: [React Intl] Could not find required `intl` object. needs to exist in the component ancestry. The…
Albert Olivé
  • 3,370
  • 4
  • 40
  • 60
8
votes
3 answers

Testing react-intl components with enzyme

I have looked into react-intl for suggestions but it doesn't leave any explicit documentation for enzyme. This is how I have been trying to write my tests. import {IntlProvider} from 'react-intl'; const intlProvider = new IntlProvider({locale:…
Deadfish
  • 1,925
  • 14
  • 14
7
votes
3 answers

How do you pass a parameter to defineMessages in react-intl?

I have an error message like the one below: Could not retrieve data: ${e} How do I convert this to a definedMessage that can accept this error parameter? A standard definedMessage: const messages = defineMessages({ dataError: { …
reectrix
  • 5,419
  • 15
  • 44
  • 74
7
votes
3 answers

How can I formatMessage with a tags (links) using react-intl?

I need to add links to the text I need translated. How can I formatMessages that have links? Right now this is what I am trying to do: const messages = defineMessages({ copy: { id: 'checkout.OrderReview.copy', description: 'Label for add…
Stephani Alves
  • 793
  • 8
  • 14
6
votes
1 answer

Getting error when using FormattedMessage inside a module: Error: [React Intl] Could not find required `intl` object

I have a monorepo which exposes a TypeScript module, which is consumed & used by a React TypeScript project. When the module inserts arbitrary React elements to the virtual DOM - everything works as expected, including when I try to use React Router…
chakaz
  • 209
  • 10
6
votes
3 answers

How to render a list of formatted messages using React-Intl

I have a navigation with standard items like: contact, services, prices, etc... I render it like this: const menuItemList = menuItems.map((item, index) => { return (
  • Nastro
    • 1,330
    • 1
    • 15
    • 32
    • 6
    votes
    2 answers

    Can't add prefixes to paths properly in React router

    I'm creating multi language app. I'm using : React Intl; React Router (latest v4); Redux. Paths in my app are going to be depending on locale: / <-- default expecting this to be uk /en /ru /news <-- uk /en/news /ru/news If user has locale = en-US…
    Taras Yaremkiv
    • 3,205
    • 6
    • 25
    • 48
    6
    votes
    2 answers

    How to use react-intl 2 with redux?

    How to use injectintl along with connect in the application using react-intl 2.0 and redux. See the last two lines of my code and tell me what is the proper way of doing that. import React from 'react'; import { deleteTodo } from…
    Ali Raza
    • 147
    • 1
    • 10
    6
    votes
    1 answer

    How to deal with multiple usage of a React-Intl message?

    I can't find anything in the react-intl docs (I'm using v2 branch) regarding this kind of usage, hence this issue. Is there a recommended approach for the following use-case? Say I have 2 components, Tooltip and Select. Both require the same…
    kumarharsh
    • 17,121
    • 7
    • 69
    • 93
    5
    votes
    1 answer

    Next.js 10 + sub-routing, how to access locale in custom app on server-side

    I'm migrating a project from next.js 7 to 10. It uses react-intl for translations and was written in TypeScript. In the previous version I had a custom server.js and handled sub-routing (/de, /fr, etc.) for multilingual purposes in it. And in…
    Ali Afsah
    • 118
    • 1
    • 6
    1
    2
    3
    …
    22 23