React-Intl How to use FormattedMessage in input placeholder
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
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?
reactjs react-intl react-starter-kit
add a comment |
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?
reactjs react-intl react-starter-kit
The intl and injection worked for me from this: stackoverflow.com/questions/33441524/…
– Bryan
Sep 22 '16 at 16:15
Try npmjs.com/package/react-intl-universal. In this case, you could just write like this<input placeholder={intl.get('messageId')} / >
for the placeholder.
– cwtuan
Apr 8 at 5:29
add a comment |
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?
reactjs react-intl react-starter-kit
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?
reactjs react-intl react-starter-kit
reactjs react-intl react-starter-kit
asked Sep 22 '16 at 5:00
BryanBryan
6181921
6181921
The intl and injection worked for me from this: stackoverflow.com/questions/33441524/…
– Bryan
Sep 22 '16 at 16:15
Try npmjs.com/package/react-intl-universal. In this case, you could just write like this<input placeholder={intl.get('messageId')} / >
for the placeholder.
– cwtuan
Apr 8 at 5:29
add a comment |
The intl and injection worked for me from this: stackoverflow.com/questions/33441524/…
– Bryan
Sep 22 '16 at 16:15
Try npmjs.com/package/react-intl-universal. In this case, you could just write like this<input placeholder={intl.get('messageId')} / >
for the placeholder.
– cwtuan
Apr 8 at 5:29
The intl and injection worked for me from this: stackoverflow.com/questions/33441524/…
– Bryan
Sep 22 '16 at 16:15
The intl and injection worked for me from this: stackoverflow.com/questions/33441524/…
– Bryan
Sep 22 '16 at 16:15
Try npmjs.com/package/react-intl-universal. In this case, you could just write like this
<input placeholder={intl.get('messageId')} / >
for the placeholder.– cwtuan
Apr 8 at 5:29
Try npmjs.com/package/react-intl-universal. In this case, you could just write like this
<input placeholder={intl.get('messageId')} / >
for the placeholder.– cwtuan
Apr 8 at 5:29
add a comment |
7 Answers
7
active
oldest
votes
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 render HTML, not plain text, which is not useful in your scenario.
Instead, react-intl
provides a lower level API for exactly this same reason. The rendering components themselves use this API under the hoods to format the values into HTML. Your scenario probably requires you to use the lower level formatMessage(...)
API.
You should inject the intl
object into your component by using the injectIntl
HOC and then just format the message through the API.
Example:
import React from 'react';
import { injectIntl, intlShape } from 'react-intl';
const ChildComponent = ({ intl }) => {
const placeholder = intl.formatMessage({id: 'messageId'});
return(
<input placeholder={placeholder} />
);
}
ChildComponent.propTypes = {
intl: intlShape.isRequired
}
export default injectIntl(ChildComponent);
Please note that I'm using some ES6 features here, so adapt according to your setup.
Yeah this response is good, but, I still think the purpose of this HoC is very confusing.const ChildComponent = (props, context) => {
andcontext.intl.formatMessage()
do exactly the same thing and you don't need this HoC. I don't understand why all the responses here are not even suggesting this.
– Nicolas Renon
Feb 6 at 20:48
@NicolasRenon, this answer is two and half years old. By now I would assume other/better options are available. Still, this particular example is of no particular interest but in a bigger scopeChildComponent
could have any other kind of logic you'd like (formatting of many messages, for instance). It's not meant to be a one size fits all solution. It's just an example.
– lsoliveira
Feb 19 at 13:17
add a comment |
- You can use
intl
prop frominjectIntl
HoC - You can also provide function as child component:
<FormattedMessage {...messages.placeholderIntlText}>
{(msg) => (<input placeholder={msg} />)}
</FormattedMessage>
1
this one is easier to apply
– Shalkam
Sep 4 '17 at 9:03
2
@Shalkam No, it is not. This one blots the source code with unnecessary <FormattedMessage/> tags.
– Kerem Baydoğan
Oct 11 '17 at 10:16
@KeremBaydoğan I write down both possibilities. Depends on case. If you are rendering DOM element and you don't want wrap it in <span>, you should use second example.
– langpavel
Jan 4 '18 at 1:33
add a comment |
For Input placeholder for more details
<FormattedMessage id="yourid" defaultMessage="search">
{placeholder=>
<Input placeholder={placeholder}/>
}
</FormattedMessage>
add a comment |
You are trying to render a React component named FormattedMessage into a placeholder tag which is expecting a string.
You should instead just create a function named FormattedMessage that returns a string into the placeholder.
function FormattedMessage(props) {
...
}
<input placeholder=`{$(FormattedMessage({...messages.placeholderIntlText})}` />
Bryan is probably asking about react-intl, see stackoverflow.com/questions/35186297/…
– Matti Eiden
Sep 27 '16 at 9:04
add a comment |
Based on the react intl wiki the implementation of an input box with translatable placeholder will look like:
import React from 'react';
import { injectIntl, intlShape, defineMessages } from 'react-intl';
const messages = defineMessages({
placeholder: {
id: 'myPlaceholderText',
defaultMessage: '{text} and static text',
},
});
const ComponentWithInput = ({ intl, placeholderText }) => {
return (
<input
placeholder={ intl.formatMessage(messages.placeholder, { text: placeholderText }) }
/>
);
};
ComponentWithInput.propTypes = {
intl: intlShape.isRequired
};
export default injectIntl(ComponentWithInput);
and the useage of it:
import ComponentWithInput from './component-with-input';
...
render() {
<ComponentWithInput placeholderText="foo" />
}
...
The id: 'myPlaceholderText',
part is necessary to enable the babel-plugin-react-intl collect the messages for translation.
add a comment |
In my case I had the whole app in one file, so using export
wouldn't work. This one uses the normal class structure so you can use the state and other functionality of React if needed.
class nameInputOrig extends React.Component {
render () {
const {formatMessage} = this.props.intl;
return (
<input type="text" placeholder={formatMessage({id:"placeholderIntlText"})} />
);
}
}
const nameInput = injectIntl(nameInputOrig);
Apply using the created constant:
class App extends React.Component {
render () {
<nameInput />
}
}
add a comment |
Like this:
import React, {PropTypes} from 'react';
import { injectIntl, FormattedMessage } from 'react-intl';
/**
* {
* "hello": "Hello",
* "world": "World"
* }
*/
// pure function
const PureFunciton = injectIntl(({ intl }) => {
return (
<div>
<p>{intl.formatMessage({ id: 'hello' })}</p>
<p><FormattedMessage id="world" /></p>
</div>
)
});
// class Component
class componentName extends Component {
handleStr = () => {
// return 'Hello';
const { intl } = this.props;
return intl.formatMessage({ id: 'hello' })
}
render() {
return (
<div>
<p>{this.handleStr()}</p>
<p><FormattedMessage id="world" /></p>
</div>
);
}
}
export default injectIntl(connect(componentName));
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39630620%2freact-intl-how-to-use-formattedmessage-in-input-placeholder%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
7 Answers
7
active
oldest
votes
7 Answers
7
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 render HTML, not plain text, which is not useful in your scenario.
Instead, react-intl
provides a lower level API for exactly this same reason. The rendering components themselves use this API under the hoods to format the values into HTML. Your scenario probably requires you to use the lower level formatMessage(...)
API.
You should inject the intl
object into your component by using the injectIntl
HOC and then just format the message through the API.
Example:
import React from 'react';
import { injectIntl, intlShape } from 'react-intl';
const ChildComponent = ({ intl }) => {
const placeholder = intl.formatMessage({id: 'messageId'});
return(
<input placeholder={placeholder} />
);
}
ChildComponent.propTypes = {
intl: intlShape.isRequired
}
export default injectIntl(ChildComponent);
Please note that I'm using some ES6 features here, so adapt according to your setup.
Yeah this response is good, but, I still think the purpose of this HoC is very confusing.const ChildComponent = (props, context) => {
andcontext.intl.formatMessage()
do exactly the same thing and you don't need this HoC. I don't understand why all the responses here are not even suggesting this.
– Nicolas Renon
Feb 6 at 20:48
@NicolasRenon, this answer is two and half years old. By now I would assume other/better options are available. Still, this particular example is of no particular interest but in a bigger scopeChildComponent
could have any other kind of logic you'd like (formatting of many messages, for instance). It's not meant to be a one size fits all solution. It's just an example.
– lsoliveira
Feb 19 at 13:17
add a comment |
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 render HTML, not plain text, which is not useful in your scenario.
Instead, react-intl
provides a lower level API for exactly this same reason. The rendering components themselves use this API under the hoods to format the values into HTML. Your scenario probably requires you to use the lower level formatMessage(...)
API.
You should inject the intl
object into your component by using the injectIntl
HOC and then just format the message through the API.
Example:
import React from 'react';
import { injectIntl, intlShape } from 'react-intl';
const ChildComponent = ({ intl }) => {
const placeholder = intl.formatMessage({id: 'messageId'});
return(
<input placeholder={placeholder} />
);
}
ChildComponent.propTypes = {
intl: intlShape.isRequired
}
export default injectIntl(ChildComponent);
Please note that I'm using some ES6 features here, so adapt according to your setup.
Yeah this response is good, but, I still think the purpose of this HoC is very confusing.const ChildComponent = (props, context) => {
andcontext.intl.formatMessage()
do exactly the same thing and you don't need this HoC. I don't understand why all the responses here are not even suggesting this.
– Nicolas Renon
Feb 6 at 20:48
@NicolasRenon, this answer is two and half years old. By now I would assume other/better options are available. Still, this particular example is of no particular interest but in a bigger scopeChildComponent
could have any other kind of logic you'd like (formatting of many messages, for instance). It's not meant to be a one size fits all solution. It's just an example.
– lsoliveira
Feb 19 at 13:17
add a comment |
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 render HTML, not plain text, which is not useful in your scenario.
Instead, react-intl
provides a lower level API for exactly this same reason. The rendering components themselves use this API under the hoods to format the values into HTML. Your scenario probably requires you to use the lower level formatMessage(...)
API.
You should inject the intl
object into your component by using the injectIntl
HOC and then just format the message through the API.
Example:
import React from 'react';
import { injectIntl, intlShape } from 'react-intl';
const ChildComponent = ({ intl }) => {
const placeholder = intl.formatMessage({id: 'messageId'});
return(
<input placeholder={placeholder} />
);
}
ChildComponent.propTypes = {
intl: intlShape.isRequired
}
export default injectIntl(ChildComponent);
Please note that I'm using some ES6 features here, so adapt according to your setup.
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 render HTML, not plain text, which is not useful in your scenario.
Instead, react-intl
provides a lower level API for exactly this same reason. The rendering components themselves use this API under the hoods to format the values into HTML. Your scenario probably requires you to use the lower level formatMessage(...)
API.
You should inject the intl
object into your component by using the injectIntl
HOC and then just format the message through the API.
Example:
import React from 'react';
import { injectIntl, intlShape } from 'react-intl';
const ChildComponent = ({ intl }) => {
const placeholder = intl.formatMessage({id: 'messageId'});
return(
<input placeholder={placeholder} />
);
}
ChildComponent.propTypes = {
intl: intlShape.isRequired
}
export default injectIntl(ChildComponent);
Please note that I'm using some ES6 features here, so adapt according to your setup.
edited Oct 18 '17 at 10:16
rofrol
7,93534649
7,93534649
answered Sep 28 '16 at 16:45
lsoliveiralsoliveira
2,89411628
2,89411628
Yeah this response is good, but, I still think the purpose of this HoC is very confusing.const ChildComponent = (props, context) => {
andcontext.intl.formatMessage()
do exactly the same thing and you don't need this HoC. I don't understand why all the responses here are not even suggesting this.
– Nicolas Renon
Feb 6 at 20:48
@NicolasRenon, this answer is two and half years old. By now I would assume other/better options are available. Still, this particular example is of no particular interest but in a bigger scopeChildComponent
could have any other kind of logic you'd like (formatting of many messages, for instance). It's not meant to be a one size fits all solution. It's just an example.
– lsoliveira
Feb 19 at 13:17
add a comment |
Yeah this response is good, but, I still think the purpose of this HoC is very confusing.const ChildComponent = (props, context) => {
andcontext.intl.formatMessage()
do exactly the same thing and you don't need this HoC. I don't understand why all the responses here are not even suggesting this.
– Nicolas Renon
Feb 6 at 20:48
@NicolasRenon, this answer is two and half years old. By now I would assume other/better options are available. Still, this particular example is of no particular interest but in a bigger scopeChildComponent
could have any other kind of logic you'd like (formatting of many messages, for instance). It's not meant to be a one size fits all solution. It's just an example.
– lsoliveira
Feb 19 at 13:17
Yeah this response is good, but, I still think the purpose of this HoC is very confusing.
const ChildComponent = (props, context) => {
and context.intl.formatMessage()
do exactly the same thing and you don't need this HoC. I don't understand why all the responses here are not even suggesting this.– Nicolas Renon
Feb 6 at 20:48
Yeah this response is good, but, I still think the purpose of this HoC is very confusing.
const ChildComponent = (props, context) => {
and context.intl.formatMessage()
do exactly the same thing and you don't need this HoC. I don't understand why all the responses here are not even suggesting this.– Nicolas Renon
Feb 6 at 20:48
@NicolasRenon, this answer is two and half years old. By now I would assume other/better options are available. Still, this particular example is of no particular interest but in a bigger scope
ChildComponent
could have any other kind of logic you'd like (formatting of many messages, for instance). It's not meant to be a one size fits all solution. It's just an example.– lsoliveira
Feb 19 at 13:17
@NicolasRenon, this answer is two and half years old. By now I would assume other/better options are available. Still, this particular example is of no particular interest but in a bigger scope
ChildComponent
could have any other kind of logic you'd like (formatting of many messages, for instance). It's not meant to be a one size fits all solution. It's just an example.– lsoliveira
Feb 19 at 13:17
add a comment |
- You can use
intl
prop frominjectIntl
HoC - You can also provide function as child component:
<FormattedMessage {...messages.placeholderIntlText}>
{(msg) => (<input placeholder={msg} />)}
</FormattedMessage>
1
this one is easier to apply
– Shalkam
Sep 4 '17 at 9:03
2
@Shalkam No, it is not. This one blots the source code with unnecessary <FormattedMessage/> tags.
– Kerem Baydoğan
Oct 11 '17 at 10:16
@KeremBaydoğan I write down both possibilities. Depends on case. If you are rendering DOM element and you don't want wrap it in <span>, you should use second example.
– langpavel
Jan 4 '18 at 1:33
add a comment |
- You can use
intl
prop frominjectIntl
HoC - You can also provide function as child component:
<FormattedMessage {...messages.placeholderIntlText}>
{(msg) => (<input placeholder={msg} />)}
</FormattedMessage>
1
this one is easier to apply
– Shalkam
Sep 4 '17 at 9:03
2
@Shalkam No, it is not. This one blots the source code with unnecessary <FormattedMessage/> tags.
– Kerem Baydoğan
Oct 11 '17 at 10:16
@KeremBaydoğan I write down both possibilities. Depends on case. If you are rendering DOM element and you don't want wrap it in <span>, you should use second example.
– langpavel
Jan 4 '18 at 1:33
add a comment |
- You can use
intl
prop frominjectIntl
HoC - You can also provide function as child component:
<FormattedMessage {...messages.placeholderIntlText}>
{(msg) => (<input placeholder={msg} />)}
</FormattedMessage>
- You can use
intl
prop frominjectIntl
HoC - You can also provide function as child component:
<FormattedMessage {...messages.placeholderIntlText}>
{(msg) => (<input placeholder={msg} />)}
</FormattedMessage>
answered Aug 12 '17 at 0:08
langpavellangpavel
695710
695710
1
this one is easier to apply
– Shalkam
Sep 4 '17 at 9:03
2
@Shalkam No, it is not. This one blots the source code with unnecessary <FormattedMessage/> tags.
– Kerem Baydoğan
Oct 11 '17 at 10:16
@KeremBaydoğan I write down both possibilities. Depends on case. If you are rendering DOM element and you don't want wrap it in <span>, you should use second example.
– langpavel
Jan 4 '18 at 1:33
add a comment |
1
this one is easier to apply
– Shalkam
Sep 4 '17 at 9:03
2
@Shalkam No, it is not. This one blots the source code with unnecessary <FormattedMessage/> tags.
– Kerem Baydoğan
Oct 11 '17 at 10:16
@KeremBaydoğan I write down both possibilities. Depends on case. If you are rendering DOM element and you don't want wrap it in <span>, you should use second example.
– langpavel
Jan 4 '18 at 1:33
1
1
this one is easier to apply
– Shalkam
Sep 4 '17 at 9:03
this one is easier to apply
– Shalkam
Sep 4 '17 at 9:03
2
2
@Shalkam No, it is not. This one blots the source code with unnecessary <FormattedMessage/> tags.
– Kerem Baydoğan
Oct 11 '17 at 10:16
@Shalkam No, it is not. This one blots the source code with unnecessary <FormattedMessage/> tags.
– Kerem Baydoğan
Oct 11 '17 at 10:16
@KeremBaydoğan I write down both possibilities. Depends on case. If you are rendering DOM element and you don't want wrap it in <span>, you should use second example.
– langpavel
Jan 4 '18 at 1:33
@KeremBaydoğan I write down both possibilities. Depends on case. If you are rendering DOM element and you don't want wrap it in <span>, you should use second example.
– langpavel
Jan 4 '18 at 1:33
add a comment |
For Input placeholder for more details
<FormattedMessage id="yourid" defaultMessage="search">
{placeholder=>
<Input placeholder={placeholder}/>
}
</FormattedMessage>
add a comment |
For Input placeholder for more details
<FormattedMessage id="yourid" defaultMessage="search">
{placeholder=>
<Input placeholder={placeholder}/>
}
</FormattedMessage>
add a comment |
For Input placeholder for more details
<FormattedMessage id="yourid" defaultMessage="search">
{placeholder=>
<Input placeholder={placeholder}/>
}
</FormattedMessage>
For Input placeholder for more details
<FormattedMessage id="yourid" defaultMessage="search">
{placeholder=>
<Input placeholder={placeholder}/>
}
</FormattedMessage>
answered Nov 24 '18 at 17:21
EL TEGANI MOHAMEDEL TEGANI MOHAMED
1,1142620
1,1142620
add a comment |
add a comment |
You are trying to render a React component named FormattedMessage into a placeholder tag which is expecting a string.
You should instead just create a function named FormattedMessage that returns a string into the placeholder.
function FormattedMessage(props) {
...
}
<input placeholder=`{$(FormattedMessage({...messages.placeholderIntlText})}` />
Bryan is probably asking about react-intl, see stackoverflow.com/questions/35186297/…
– Matti Eiden
Sep 27 '16 at 9:04
add a comment |
You are trying to render a React component named FormattedMessage into a placeholder tag which is expecting a string.
You should instead just create a function named FormattedMessage that returns a string into the placeholder.
function FormattedMessage(props) {
...
}
<input placeholder=`{$(FormattedMessage({...messages.placeholderIntlText})}` />
Bryan is probably asking about react-intl, see stackoverflow.com/questions/35186297/…
– Matti Eiden
Sep 27 '16 at 9:04
add a comment |
You are trying to render a React component named FormattedMessage into a placeholder tag which is expecting a string.
You should instead just create a function named FormattedMessage that returns a string into the placeholder.
function FormattedMessage(props) {
...
}
<input placeholder=`{$(FormattedMessage({...messages.placeholderIntlText})}` />
You are trying to render a React component named FormattedMessage into a placeholder tag which is expecting a string.
You should instead just create a function named FormattedMessage that returns a string into the placeholder.
function FormattedMessage(props) {
...
}
<input placeholder=`{$(FormattedMessage({...messages.placeholderIntlText})}` />
answered Sep 22 '16 at 7:56
LottamusLottamus
35727
35727
Bryan is probably asking about react-intl, see stackoverflow.com/questions/35186297/…
– Matti Eiden
Sep 27 '16 at 9:04
add a comment |
Bryan is probably asking about react-intl, see stackoverflow.com/questions/35186297/…
– Matti Eiden
Sep 27 '16 at 9:04
Bryan is probably asking about react-intl, see stackoverflow.com/questions/35186297/…
– Matti Eiden
Sep 27 '16 at 9:04
Bryan is probably asking about react-intl, see stackoverflow.com/questions/35186297/…
– Matti Eiden
Sep 27 '16 at 9:04
add a comment |
Based on the react intl wiki the implementation of an input box with translatable placeholder will look like:
import React from 'react';
import { injectIntl, intlShape, defineMessages } from 'react-intl';
const messages = defineMessages({
placeholder: {
id: 'myPlaceholderText',
defaultMessage: '{text} and static text',
},
});
const ComponentWithInput = ({ intl, placeholderText }) => {
return (
<input
placeholder={ intl.formatMessage(messages.placeholder, { text: placeholderText }) }
/>
);
};
ComponentWithInput.propTypes = {
intl: intlShape.isRequired
};
export default injectIntl(ComponentWithInput);
and the useage of it:
import ComponentWithInput from './component-with-input';
...
render() {
<ComponentWithInput placeholderText="foo" />
}
...
The id: 'myPlaceholderText',
part is necessary to enable the babel-plugin-react-intl collect the messages for translation.
add a comment |
Based on the react intl wiki the implementation of an input box with translatable placeholder will look like:
import React from 'react';
import { injectIntl, intlShape, defineMessages } from 'react-intl';
const messages = defineMessages({
placeholder: {
id: 'myPlaceholderText',
defaultMessage: '{text} and static text',
},
});
const ComponentWithInput = ({ intl, placeholderText }) => {
return (
<input
placeholder={ intl.formatMessage(messages.placeholder, { text: placeholderText }) }
/>
);
};
ComponentWithInput.propTypes = {
intl: intlShape.isRequired
};
export default injectIntl(ComponentWithInput);
and the useage of it:
import ComponentWithInput from './component-with-input';
...
render() {
<ComponentWithInput placeholderText="foo" />
}
...
The id: 'myPlaceholderText',
part is necessary to enable the babel-plugin-react-intl collect the messages for translation.
add a comment |
Based on the react intl wiki the implementation of an input box with translatable placeholder will look like:
import React from 'react';
import { injectIntl, intlShape, defineMessages } from 'react-intl';
const messages = defineMessages({
placeholder: {
id: 'myPlaceholderText',
defaultMessage: '{text} and static text',
},
});
const ComponentWithInput = ({ intl, placeholderText }) => {
return (
<input
placeholder={ intl.formatMessage(messages.placeholder, { text: placeholderText }) }
/>
);
};
ComponentWithInput.propTypes = {
intl: intlShape.isRequired
};
export default injectIntl(ComponentWithInput);
and the useage of it:
import ComponentWithInput from './component-with-input';
...
render() {
<ComponentWithInput placeholderText="foo" />
}
...
The id: 'myPlaceholderText',
part is necessary to enable the babel-plugin-react-intl collect the messages for translation.
Based on the react intl wiki the implementation of an input box with translatable placeholder will look like:
import React from 'react';
import { injectIntl, intlShape, defineMessages } from 'react-intl';
const messages = defineMessages({
placeholder: {
id: 'myPlaceholderText',
defaultMessage: '{text} and static text',
},
});
const ComponentWithInput = ({ intl, placeholderText }) => {
return (
<input
placeholder={ intl.formatMessage(messages.placeholder, { text: placeholderText }) }
/>
);
};
ComponentWithInput.propTypes = {
intl: intlShape.isRequired
};
export default injectIntl(ComponentWithInput);
and the useage of it:
import ComponentWithInput from './component-with-input';
...
render() {
<ComponentWithInput placeholderText="foo" />
}
...
The id: 'myPlaceholderText',
part is necessary to enable the babel-plugin-react-intl collect the messages for translation.
answered Jan 19 '18 at 13:34
gazdagergogazdagergo
1,430818
1,430818
add a comment |
add a comment |
In my case I had the whole app in one file, so using export
wouldn't work. This one uses the normal class structure so you can use the state and other functionality of React if needed.
class nameInputOrig extends React.Component {
render () {
const {formatMessage} = this.props.intl;
return (
<input type="text" placeholder={formatMessage({id:"placeholderIntlText"})} />
);
}
}
const nameInput = injectIntl(nameInputOrig);
Apply using the created constant:
class App extends React.Component {
render () {
<nameInput />
}
}
add a comment |
In my case I had the whole app in one file, so using export
wouldn't work. This one uses the normal class structure so you can use the state and other functionality of React if needed.
class nameInputOrig extends React.Component {
render () {
const {formatMessage} = this.props.intl;
return (
<input type="text" placeholder={formatMessage({id:"placeholderIntlText"})} />
);
}
}
const nameInput = injectIntl(nameInputOrig);
Apply using the created constant:
class App extends React.Component {
render () {
<nameInput />
}
}
add a comment |
In my case I had the whole app in one file, so using export
wouldn't work. This one uses the normal class structure so you can use the state and other functionality of React if needed.
class nameInputOrig extends React.Component {
render () {
const {formatMessage} = this.props.intl;
return (
<input type="text" placeholder={formatMessage({id:"placeholderIntlText"})} />
);
}
}
const nameInput = injectIntl(nameInputOrig);
Apply using the created constant:
class App extends React.Component {
render () {
<nameInput />
}
}
In my case I had the whole app in one file, so using export
wouldn't work. This one uses the normal class structure so you can use the state and other functionality of React if needed.
class nameInputOrig extends React.Component {
render () {
const {formatMessage} = this.props.intl;
return (
<input type="text" placeholder={formatMessage({id:"placeholderIntlText"})} />
);
}
}
const nameInput = injectIntl(nameInputOrig);
Apply using the created constant:
class App extends React.Component {
render () {
<nameInput />
}
}
answered Dec 30 '17 at 17:10
aksuaksu
4,54751837
4,54751837
add a comment |
add a comment |
Like this:
import React, {PropTypes} from 'react';
import { injectIntl, FormattedMessage } from 'react-intl';
/**
* {
* "hello": "Hello",
* "world": "World"
* }
*/
// pure function
const PureFunciton = injectIntl(({ intl }) => {
return (
<div>
<p>{intl.formatMessage({ id: 'hello' })}</p>
<p><FormattedMessage id="world" /></p>
</div>
)
});
// class Component
class componentName extends Component {
handleStr = () => {
// return 'Hello';
const { intl } = this.props;
return intl.formatMessage({ id: 'hello' })
}
render() {
return (
<div>
<p>{this.handleStr()}</p>
<p><FormattedMessage id="world" /></p>
</div>
);
}
}
export default injectIntl(connect(componentName));
add a comment |
Like this:
import React, {PropTypes} from 'react';
import { injectIntl, FormattedMessage } from 'react-intl';
/**
* {
* "hello": "Hello",
* "world": "World"
* }
*/
// pure function
const PureFunciton = injectIntl(({ intl }) => {
return (
<div>
<p>{intl.formatMessage({ id: 'hello' })}</p>
<p><FormattedMessage id="world" /></p>
</div>
)
});
// class Component
class componentName extends Component {
handleStr = () => {
// return 'Hello';
const { intl } = this.props;
return intl.formatMessage({ id: 'hello' })
}
render() {
return (
<div>
<p>{this.handleStr()}</p>
<p><FormattedMessage id="world" /></p>
</div>
);
}
}
export default injectIntl(connect(componentName));
add a comment |
Like this:
import React, {PropTypes} from 'react';
import { injectIntl, FormattedMessage } from 'react-intl';
/**
* {
* "hello": "Hello",
* "world": "World"
* }
*/
// pure function
const PureFunciton = injectIntl(({ intl }) => {
return (
<div>
<p>{intl.formatMessage({ id: 'hello' })}</p>
<p><FormattedMessage id="world" /></p>
</div>
)
});
// class Component
class componentName extends Component {
handleStr = () => {
// return 'Hello';
const { intl } = this.props;
return intl.formatMessage({ id: 'hello' })
}
render() {
return (
<div>
<p>{this.handleStr()}</p>
<p><FormattedMessage id="world" /></p>
</div>
);
}
}
export default injectIntl(connect(componentName));
Like this:
import React, {PropTypes} from 'react';
import { injectIntl, FormattedMessage } from 'react-intl';
/**
* {
* "hello": "Hello",
* "world": "World"
* }
*/
// pure function
const PureFunciton = injectIntl(({ intl }) => {
return (
<div>
<p>{intl.formatMessage({ id: 'hello' })}</p>
<p><FormattedMessage id="world" /></p>
</div>
)
});
// class Component
class componentName extends Component {
handleStr = () => {
// return 'Hello';
const { intl } = this.props;
return intl.formatMessage({ id: 'hello' })
}
render() {
return (
<div>
<p>{this.handleStr()}</p>
<p><FormattedMessage id="world" /></p>
</div>
);
}
}
export default injectIntl(connect(componentName));
answered Nov 21 '17 at 11:10
K.KingK.King
82212
82212
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39630620%2freact-intl-how-to-use-formattedmessage-in-input-placeholder%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The intl and injection worked for me from this: stackoverflow.com/questions/33441524/…
– Bryan
Sep 22 '16 at 16:15
Try npmjs.com/package/react-intl-universal. In this case, you could just write like this
<input placeholder={intl.get('messageId')} / >
for the placeholder.– cwtuan
Apr 8 at 5:29