react-intl

React-intl, use api with Typescript

由 为君一笑 提交于 2019-12-22 04:42:25
问题 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 <IntlProvider locale={`fr-FR`} messages={messages_fr}> <NameForm/> </IntlProvider>, //nameForm.tsx interface NameFormProps { intl?: InjectedIntlProps, } export default injectIntl(NameForm); class NameForm extends React.Component<NameFormProps, {}> { render() { let

Dynamically import language json file for react / react-intl

由 核能气质少年 提交于 2019-12-21 13:08:10
问题 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({ history, routes }, (error, redirectLocation, renderProps) => { ReactDOM.render( <HotEnabler> <IntlProvider locale={locale} messages={localeData}> <Provider store={store} app={app} restApp={restApp} key="provider"> <Router {...renderProps} render=

How to retrieve a string in ReactIntl 2.0 without using FormattedMessage

由 流过昼夜 提交于 2019-12-18 21:31:29
问题 Please correct me if I am wrong, FormattedMessage in ReactIntl returns a string wrapped by span tags. In ReactIntl 1.2, we have the option to use this.getIntlMessage('key') to get only the string part. Here is my question: Is there an equivalent of that in ReactIntl 2.0? I am aware that the string can be obtained by using the Function-As-Child pattern in FormattedMessage as <FormattedMessage id="placeholder"> {(formattedValue)=>( <MyComponent ref="mycomponent" placeholder={formattedValue}/> )

React-Intl How to use FormattedMessage in input placeholder

由 霸气de小男生 提交于 2019-12-17 22:12:35
问题 I'm unsure how to get the values from <FormattedMessage {...messages.placeholderIntlText} /> into a placeholder format like input: <input placeholder={<FormattedMessage {...messages.placeholderIntlText} />} /> as it would return [Object object] in the actual placeholder. Is there a way to get the actual correct value? 回答1: The <Formatted... /> React components in react-intl are meant to be used in rendering scenarios and are not meant to be used in placeholders, alternate text, etc. They

Unable to Install React-Intl using NPM

由 江枫思渺然 提交于 2019-12-12 03:18:22
问题 I'm not able to install react-intl.It keeps throwing error ├── UNMET PEER DEPENDENCY react@0.13.3 └── react-intl@2.1.3 npm WARN react-dom@15.3.0 requires a peer of react@^15.3.0 but none was installed. npm WARN react-intl@2.1.3 requires a peer of react@^0.14.0 || ^15.0.0-0 but none was installed. npm WARN react-native@0.30.0 requires a peer of react@~15.2.0 but none was installed. This is my package.json "dependencies": { "baobab": "^1.1.2", "baobab-react": "^0.1.1", "d3": "^3.5.6", "fixed

How to add locale data dynamically using React Intl?

由 荒凉一梦 提交于 2019-12-11 00:29:52
问题 Am using React-intl for internationalization of an UI Util Library. The library has a folder say i18n wherein I place json files for different locales.If the user of this library want to add support for additional locales, he/she can place additional json file with key/value pairs for the respective locale. But React-intl requires to import and addLocaleData for the respective locale in prior.For example, import fr from 'react-intl/locale-data/fr'; addLocaleData([...fr]); Is there a way to

react-intl vs react-i18next for ReactJS internationalization (i18n) [closed]

由 十年热恋 提交于 2019-12-09 04:30:58
问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 2 years ago . I need to build a multilanguage application using ReactJS. The application needs a custom dictionary for different languages as well as automatic formatting of date/time, numbers and currency. From all I´ve seen there are 2 very popular libraries: reac-intl and react-i18next What would be the advantages between

React-intl cosnt <FormattedMessage /> is giving [object object] as result

由 大憨熊 提交于 2019-12-08 00:23:56
问题 I am using "react-intl": "^2.4.0", and "react": "^16.2.0". I am trying to assign the output of FormattedMessage tag to a constant and put it in the input tag placeholder. Code Image Expected Output Input field with text in the respective language in it but it is coming [object object] inside the text box. 回答1: <FormattedMessage /> is a component which cannot be placed to placeholder which expects a raw String. import {injectIntl} from 'react-intl'; class TestComponent extends React.Component{

React-intl cosnt <FormattedMessage /> is giving [object object] as result

由 别来无恙 提交于 2019-12-06 09:14:28
I am using "react-intl": "^2.4.0", and "react": "^16.2.0". I am trying to assign the output of FormattedMessage tag to a constant and put it in the input tag placeholder. Code Image Expected Output Input field with text in the respective language in it but it is coming [object object] inside the text box. <FormattedMessage /> is a component which cannot be placed to placeholder which expects a raw String. import {injectIntl} from 'react-intl'; class TestComponent extends React.Component{ render(){ const { intl } = this.props; return ( <input placeholder={intl.formatMessage({ id: "loginPage

React-intl, use api with Typescript

由 两盒软妹~` 提交于 2019-12-05 02:57:04
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 <IntlProvider locale={`fr-FR`} messages={messages_fr}> <NameForm/> </IntlProvider>, //nameForm.tsx interface NameFormProps { intl?: InjectedIntlProps, } export default injectIntl(NameForm); class NameForm extends React.Component<NameFormProps, {}> { render() { let namePlaceholder = this.props.intl.formatMessage( {id: "NAME_PLACEHOLDER", defaultMessage: "name" }); return (
订阅 react-intl