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

How to access locale in custom app on server-side in Next.js?

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 Afsahnoudeh
  • 197
  • 1
  • 3
  • 10
7
votes
2 answers

React-Intl: Message not formatting in Safari

I have the following translation: {count, number} {count, plural, one {Kundenbewertung} other {Kundenbewertungen}} In Chrome it displays 23 Kundenbewertungen just fine but in Safari it displays the translation string and throws the error Error…
mxmtsk
  • 4,285
  • 6
  • 22
  • 47
7
votes
0 answers

How to use array string in react-intl?

Is there any option to show translation from array string ? "app.components.TeaserContent.kooy":["your personal selection.", "outfits styled for you.", "new favourite items.", "your new wardrobe."] for import { defineMessages } from…
Mo.
  • 26,306
  • 36
  • 159
  • 225
7
votes
4 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,719
    • 7
    • 21
    • 40
    • 7
    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
    • 18,961
    • 8
    • 72
    • 100
    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
    • 261
    • 2
    • 13
    6
    votes
    1 answer

    Why doesn't Intl.NumberFormat work with units in Safari and Firefox?

    I'm trying to use the example given here concerning formatting a number. console.log((16).toLocaleString('en-GB', { style: "unit", unit: "liter", unitDisplay: "long" })); I tried it in chrome and it works great. However, in…
    nephews
    • 65
    • 1
    • 4
    6
    votes
    2 answers

    Is it possible to override locale of one specific intl.formatMessage?

    I use react-intl with en and fr, and my React app is wrapped in so that e.g. when lang is en, all intl.formatMessage calls result in English texts. What I want to achieve is that I want , but…
    Peter
    • 2,162
    • 3
    • 21
    • 27
    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,440
    • 7
    • 32
    • 54
    6
    votes
    3 answers

    Translations for constants files in react

    I am trying to find best concept of translations for my react app. I have a higher order component for translations and use it by: export default translate('MyComponent')(MyComponent); And inside a component I have all texts available by props - it…
    marcint339
    • 348
    • 3
    • 11
    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
    5
    votes
    2 answers

    Make id in FormattedMessage from react-intl inherit from a custom TypeScript interface to enable VS IntelliSense and type checking

    Given that react-localization does not have date and number format and is heavily dependent on one developer we decided to switch to react-intl because it seems safer in the long…
    Ogglas
    • 62,132
    • 37
    • 328
    • 418
    5
    votes
    1 answer

    Webpack dynamic import .json file?

    I'm using React Intl for x number of languages (example below) and at the moment Im importing the following where I setup my App: import { addLocaleData } from 'react-intl'; import locale_en from 'react-intl/locale-data/en'; import locale_de from…
    nickelman
    • 702
    • 6
    • 24
    5
    votes
    1 answer

    React-intl const is giving [object object] as result

    I am using "react-intl": "^2.4.0", and "react": "^16.2.0". I am trying to assign the output of tag to a constant and put it in the input tag placeholder. Expected Output Input field with text in the respective language in it but…
    pankaj
    • 93
    • 1
    • 8
    5
    votes
    2 answers

    What format of locale does React Intl use?

    According to the React Intl documentation, to add support for a particular language to your application, you need to import a relevant language file from the locale-data/ directory and pass it to a React Intl function called addLocaleData(). When…
    Chris Kobrzak
    • 1,044
    • 14
    • 20
    1 2
    3
    …
    26 27