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
1
vote
1 answer

Unable to find file path in getStaticProps function of internal page in Next Js

I am working on multi-language feature on Next JS app. Here is the folder structure of my project. On the index page i.e. Home page, I am able to get the locales module using getStaticProps : export function getStaticProps({ locale }) { return…
Deep Kakkar
  • 5,831
  • 4
  • 39
  • 75
1
vote
3 answers

Extract String from Formatted Message

I am trying to extract the string part from FormattedMessage so I can access it and export it using CSV. Here is my FormattedMessage code (IntlMessages.js): import React from 'react'; import {FormattedMessage, injectIntl} from 'react-intl'; const…
Raghav
  • 67
  • 1
  • 9
1
vote
0 answers

Cannot shallow render a component using IntlProvider

I have the following component, using Flow: //@flow import React, { type Node } from 'react'; import { useIntl } from 'react-intl'; type Props = { balance: Object }; const AvailableDiscount = ({ balance }: Props): Node => { const {…
Enrique Moreno Tent
  • 24,127
  • 34
  • 104
  • 189
1
vote
1 answer

How to use FormattedPlural correctly? Always get the "other" options

It's always getting "5 clicks" on the screen. The React Intl documentation is so poor and so bad API design. How come this would give us '5 clicks' as always. Any other i18n lib recommended for React?
newBike
  • 14,385
  • 29
  • 109
  • 192
1
vote
2 answers

Update language using react-intl and mobx state tree

it's the first time I use react-intl with Mobx state tree. Basically I have two buttons in the header (it and en) that on click set the current language saved in a Mobx State Tree variable. Something like this. In my state: const FULL_LANGUAGE = …
whitecircle
  • 237
  • 9
  • 34
1
vote
1 answer

Serve translations using react-intl

The project I'm currently working uses react-intl to handle the i18n and I noticed that components are fed with the formatted message in 3 different ways: Using a component: Using a function:…
Francesco Meli
  • 2,484
  • 2
  • 21
  • 52
1
vote
1 answer

Use in FormattedMessage as value (with TypeScript)

I am trying to use the optional word break tag in a message for . Background Some words/texts are to large for some parent elements on mobile screens and we are using a column like layout, which we cannot…
BairDev
  • 2,865
  • 4
  • 27
  • 50
1
vote
1 answer

Gatsby Local Plugin Build Crash

I am a Gatsby newbie and I'm following this tutorial: https://www.gatsbyjs.com/docs/creating-plugins/ to learn to create a gatsby local plugin using react-intl. I put the plugin in the plugins folder in the root of the project. This is the demo code…
85Ryan
  • 115
  • 2
  • 8
1
vote
3 answers

How do I extract messages from multiple specific folders with FormatJS CLI?

I have /components/foo.js and /pages/bar.js, both are using with a different defaultMessage: // /components/foo.js export default function Foo() { return ( ); } //…
Camilo
  • 6,504
  • 4
  • 39
  • 60
1
vote
1 answer

React-intl omit specified text if value is null

How can you conditionally remove surrounding text and whitespace (or not include rather) in a message? Let's use the example from the documentation.
Maximilian Øystå Lloyd
  • 39
  • 6
1
vote
1 answer

Typescript Error: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type

Trying to get some data for a modal based on a feature name. The feature itself is a string coming from an API. The messages object is for translating the strings in other countries. import { defineMessages } from 'react-intl'; messages =…
Raphael Wolfgang Raede
  • 43
  • 6
1
vote
0 answers

What is the typescript type of intl in react-intl?

I want to pass the intl object to a function. As type I 'm using: any. What is the right type for intl? function getLabel: (intl: any, optionSelected: string) => string = (intl, optionSelected) => { ... } const intl = useIntl(); getLabel(intl,…
vuvu
  • 4,886
  • 12
  • 50
  • 73
1
vote
0 answers

ssr react-intl format message doesn't work properly

import React from 'react' import { Helmet } from 'react-helmet-async' import { injectIntl } from 'react-intl' import PropTypes from 'prop-types' const Seo = props => { const { intl } = props const title =…
Andrey Radkevich
  • 3,012
  • 5
  • 25
  • 57
1
vote
1 answer

React-Intl use multiple locales at the same time

my use case is that I have a react app, which needs to be localized in a specific ui language - lets say german. For number and datetime formats we have another language setting, which may differs from the ui language. So lets say this cultrue is…
birnchen7
  • 108
  • 1
  • 7
1
vote
0 answers

React-intl : how to provide a default language if a particular msg for other languages do not exist?

So I'm trying to create an application which dynamically takes translations from another (custom) API but there are times that this API might not have translations for English. However, it will always have messages for the default language.…
Samidha Verma
  • 53
  • 1
  • 1
  • 6
1 2 3
…
26 27