Newest 'react-intl' Questions - Stack Overflow

Questions tagged [react-intl]

React Components for internationalization. Combines react components with FormatJS.

0
votes
0answers
7 views

react-intl language switcher does not update Formattedmessage in grand-child component

So I've started using react-intl in an older react-project (don't judge please). In index.js I change the state to the selected language: import React, { Component } from 'react'; import ReactDOM ...
0
votes
1answer
25 views

Access URL in Redux reducer

I have a language reducer that has an initial locale value: const LanguageReducer = function( state = { locale: "en", messages: {} }, action = {} ) { switch (action.type) { case ...
0
votes
0answers
14 views

react-intl, async translation import and SSR

I have a React app which uses react-intl to provide translations and it's working fine for browser DOM rendering. I have a component which deals with async locale/translation based on props it ...
2
votes
1answer
32 views

How to convert object into string using FormattedMessage to render labels in d3.js chart using REACTJs?

I am trying to make a application which supports multi language for this Im using react-intl which translates the data. While doing this Im facing a problem that when I am trying to translate it ...
2
votes
1answer
32 views

How to set locale to child locals (e.g. en-GB, en-US or fr-CA) with locales in react-intl v2

I am trying to use react-intl in order to localise a react app. It is set up and works with all parent locales such as EN, DE, FR etc. I can view the child locales such as en-GB and en-US, however, ...
0
votes
0answers
24 views

Components sometimes won't load

We have menu, and when someone clicks on button new component should load, but that doesn't happen every time. Basically we have 2 Browserouters. 1 in App.js where Intlprovider is and one in Home.js ...
1
vote
1answer
48 views

React Intl `undefined()` must be called with an object expression

React intl doesn't build on CI with following error: [React Intl] undefined() must be called with an object expression with values that are React Intl Message Descriptors, also defined as object ...
0
votes
0answers
25 views

How to represent numbers in Million Billion based on selected locale using FormattedNumber function in react-intl?

I am working on internationalisation of my application. Based on selected language ie locale I need to format the large numbers.Converting numbers into millions and billions based on locale using ...
0
votes
1answer
48 views

redux form remounted whenever react-intl update action is fired

I have my app and redux form living inside IntlProvider component like that: <IntlProvider> <Form /> </IntlProvider> the problem is that whenever I try to change the locale ...
0
votes
0answers
29 views

React 16, Babel 7, Webpack 4, React-Intl - font works fine on dev server, but doesn't on production

Using React 16, Babel 7, Webpack 4, & React-Intl, the fonts work fine on the webpack-dev-server, but it does not work when I build the production version (webpack --mode production). See the pics ...
0
votes
0answers
21 views

Facing difficulty in initialize i18next react component with fetch response data?

I am using i18next to do the internalization. Default fetch request used to get a data from server and the language information available in response data. Based on language info the page has to be ...
0
votes
1answer
125 views

Messages must be statically evaluate-able for extraction, on class

I need to add formattedMessages, on a method on a React class. We normally use injectIntl with a HOC and it works, but I am on a React class, and i've tried many things but still get the error: ...
0
votes
2answers
133 views

How to reset (or destroy) redux-form only when route changes and keep on language switch?

I create registration/login/forgot-password forms using redux-form. Also I use react-intl for multilingual support. Changing language causes rerender of components and resets the forms. I would like ...
0
votes
1answer
42 views

React intl template string throws a missed id warning

I'm trying to inject some values into translated sentence via react-intl. Following official documentation I was able to define some template message into my Localization file and it looks like that. ...
3
votes
1answer
150 views

How to insert HTML tag with injectIntl formatMessage using React-Intl?

I have a react-intl package issue. I am using an injectIntl way to use props in the component. Pure String is fine, but it will not work if I wrapped the HTML tag. Pure String Success Case const ...
0
votes
1answer
31 views

React intel and i18next React-Native

I am building a multi language app with React-Native, I am little confuse about to choose the Internationalisation library and confusion is between two Libraries One is React-intel and other is React-...
0
votes
0answers
21 views

IntlProvider - no child components appearing

I am writing a test like so: class Foo extends Component { render() { return ( <div data-test="foo-test"> <span data-test="foo-test">Bar</span&...
1
vote
1answer
204 views

How to use injectIntl from react-intl and typescript together?

I'm trying to use injectIntl from react-intl with typescript like this (which is in accordance with what I found in answers to other questions): import { injectIntl, InjectedIntlProps } from "react-...
0
votes
1answer
66 views

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 <br />. I'm currently getting errors when using react-...
0
votes
0answers
21 views

Formik Fastfield not getting translated

For Internationalization, I am using react-intl & for Form generation I am using Formik. I had to use FastField instead of Field due to some performance issue. After shifting to FastField, only ...
1
vote
1answer
215 views

React-intl: Why need to define Messages using either <FormattedMessage> Component or defineMessagesAPI function

I currently have the translated English and Japanese .json file in the format: { "en": [{ "id": "Cancel", "defaultMessage": "Cancel" }, { "id": "CommonTags", "defaultMessage": "Common ...
0
votes
0answers
13 views

Localizing static index.html page in React application

So, on my project page there is a section with strings that needs to be localized. The library that is in use is react-intl. The only problem is, that strings that need to be localized are on a static ...
0
votes
1answer
308 views

React Intl- Cannot read property 'formatMessage' of undefined

.... const func1 = (intl) => { const text = intl.formatMessage({id: 'mesage'}); const func2 = () => { return { <div>..... placeholder={text}</div> }; }; ...
0
votes
1answer
275 views

Can not compose withStyle, withWidth and injectIntl

Dears, I'm trying to compose different HOC coming from Material-Ui and react-intl, but that failed> I tried export default compose( withStyles(styles), withWidth(), )(injectIntl(NavBar)); ...
0
votes
1answer
37 views

FormattedMessage with defaultMessage shows error on console

The application I'm working on with has the option to add custom fields for a expecifc form and those fields does not support internationalization. However due to Components on our project, even after ...
0
votes
0answers
66 views

how to make gatsby website multi Language

im trying to build up a multi language website with gatsby and im useing the same code from here weziple-gatsby-starter-defualt-intl but when im using the code from the Language component its not ...
0
votes
1answer
30 views

using react-intl, but return value is escaped

I've search an answer to this question and couldn't find a good answer Im tring to have some formatting in my app and I'm using react-intl. The app looks like this: <div> <...
1
vote
0answers
116 views

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."] ...
0
votes
0answers
43 views

How can I escape braces in FormattedMessage?

I don't know how to escape curly braces in the following code: <FormattedMessage id='some.id' defaultMessage={'```\nimport "sth";\nrun()\n{\nmake();\n}\n```'} /> In the browser console ...
0
votes
2answers
87 views

react-intl: How can update child component without passing “this.props.intl”

When i change language object using intl library from parent component then i need to pass intl={this.props.intl} to child component for update. i am using FormattedMessage id="example" or this.props....
0
votes
1answer
28 views

Set the defaultMessage to look at “en-US” if the current locale is missing entry

Rather than specify a defaultMessage for every FormattedMessage, it would be nice to set the defaultMessage to always be that of a particular language. We know we are always going to have English ...
3
votes
0answers
268 views

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 ...
0
votes
0answers
19 views

How do I add a line break between Date and Time while formatting my timestamp using React-intl

I have a formatDate function that returns formattedDate from react-intl <FormattedDate value={date} year={showDate ? 'numeric' : undefined} month={showDate ? 'numeric' : undefined} ...
0
votes
0answers
322 views

React HoC inject props with typescript

I have a react HoC which is add two params (function to translate and current locale) into component props. It's works good. But i start rewrite project with TypeScript, and i have no idea how to do ...
0
votes
1answer
23 views

react-intl not changing placeholder value

Am I doing something wrong here ? I am calling intl.formatMessage() API (https://github.com/yahoo/react-intl/wiki/API#formatmessage) as follows: this.intl.formatMessage({id:'downloadRequest.success',...
0
votes
0answers
199 views

How add dynamic id to FormattedMessage in react intl

I have state area with description field and from server i give state eg. STARTED, FINISH, ARCHIVED. And i use FormattedMessage for different language like this: <FormattedMessage id={"state." + ...
0
votes
0answers
373 views

FormattedMessage(react-Intl) returns [object object] even after wrapping component with injectIntl(React-Intl) and getting a error

FormattedMessage returns a component(wrapped with span tag) and we can not use it in option placeholder so I tweaked configuration of IntlProvider to return a formatted message without span tag. Here ...
3
votes
3answers
78 views

What does this line of code mean? const {“intl”: { formatMessage }, } = this.context [duplicate]

I'm new in react and I'm reading some code i found this line of code: const {intl: { formatMessage }, } = this.context is a const declaration but i don't understand I know is JS ES6 but i don't ...
1
vote
0answers
41 views

dispatch function is called on other actions every time updateIntl is dispatched using react-intl-redux

I have a redux action and when it dispatched, it fetches data from an external service. In the response, I get the data from the backend. I Use a country code attribute and pass that as the argument ...
0
votes
1answer
103 views

react intl returns error while using formaMessage

i've searched more than 2 days for a solution, but didn't find any. I'm trying to use react-intl inside of a select-Tag and I know, that i can't use <FormattedMessage />. I have to use ...
0
votes
1answer
47 views

How to use 2 higher-order components at the same time? (in order to use injectIntl from react-intl)

I know that in order to use injectIntl from the react-intl library I will need something like: export default injectIntl(SectionNavbars) However I am already using the withStyles higher order ...
0
votes
1answer
116 views

Missing message: “app.homepage.title” for locale: “it”, using default message as fallback

I have react-intl set up on my webpage and I have verified that my intl prop contains the following: { locale: 'it', messages: { it: { app.homepage.title: 'Casa' } ...
0
votes
1answer
94 views

Pass translated text as a prop

For localization, I am using React-intl. I am exporting below(intl.js) - import { injectIntl } from 'react-intl'; const Intl = injectIntl(({ intl, children }: any) => children(intl)); const t = (...
1
vote
0answers
239 views

react intl change language with flag

I set up the internationalization in my application. This takes into account the change of language of the browser. I would also want to take into account the change of language with flags. I created ...
1
vote
0answers
490 views

react intl Missing locale data for locale

I use react-intl and I would want to use the codes regions: en-US, en-GB... import { IntlProvider, addLocaleData } from "react-intl"; import messages_en from "locales/en_GB.json"; import messages_fr ...
0
votes
0answers
102 views

Dynamically generate single JSON by merging small module JSON files ReactJS React-Intl

I am working on the React-intl for the language translation. I have configured React-inlt in my application, it's working for the single login module. I have a separate language constant file for each ...
1
vote
1answer
160 views

Why do people use translation placeholders instead of plain English?

Yes, this is the exact opposite question than: Why do people use plain english as translation placeholders? I used the standard gettext way for translation all the time but now that I'm doing ...
0
votes
1answer
210 views

injectIntl expects class with props that includes `intl`

I am having a problem with class React.ComponentClass type class. My TypeScript version is 2.4.2 - My component is this: import * as React from 'react'; import { injectIntl, InjectedIntlProps } ...
0
votes
1answer
55 views

How to translate errors which occurs in redux-saga?

I have a question, how to translate errors which are catch in redux-saga. How are you doing it in React-Redux? I am trying to do it like this: catch (error) { if(error.response.payload.error==='...
1
vote
0answers
107 views

How to return an empty string with react-intl

I am using the react library react-intl. I am trying to return an empty string with FormattedHTMLMessage and when I am sending an id, that is mapping to an empty string: "HeaderText.empty": "", In ...