React-Intl How to use FormattedMessage in input placeholder

Question

I\'m unsure how to get the values from

into a placeholder format like input:<

Answer 1

For Input placeholder for more details

   <FormattedMessage id="yourid" defaultMessage="search">
    {placeholder=>  
        <Input placeholder={placeholder}/>
        }
    </FormattedMessage>

Answer 2

Starting from the @gazdagerg 's answer, I have adapted his code in order to:

• having a new component that is a wrapper over an input
• receives an ID of a string from locale conf
• based on the ID, it returns the string in respect to the global locale setting
• handling the situation when the string ID is not set (this caused exception and page to crash)

    import React from 'react';
    import { injectIntl, intlShape, defineMessages } from 'react-intl';


    const InputWithPlaceholder = ({ intl, placeholder }) => {

      const messages = defineMessages({
        placeholder: {
          id: placeholder,
          defaultMessage: '',
        },
      });

      if(messages.placeholder.id) {
        return (
          <input placeholder={ intl.formatMessage(messages.placeholder) } />
        );
      } else {
        return (
          <input/>
        );
      }
    };

    InputWithPlaceholder.propTypes = {
      intl: intlShape.isRequired
    };

    export default injectIntl(InputWithPlaceholder);

You can use it in other file by:

1. import the new component
2. use it with the ID of the locale string as parameter

import InputWithIntlPlaceholder from 'your/path/to/component/InputWithIntlPlaceholder';

... more code here ...

<InputWithIntlPlaceholder placeholder="your.locale.string.id" />

Answer 3

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 to collect the messages for translation.

Answer 4

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})}` />

Answer 5

It's july 2019 and react-intl 3 beta is shipped with a useIntl hook to make these kind of translations easier:

import React from 'react';
import {useIntl, FormattedDate} from 'react-intl';

const FunctionComponent: React.FC<{date: number | Date}> = ({date}) => {
  const intl = useIntl();
  return (
    <span title={intl.formatDate(date)}>
      <FormattedDate value={date} />
    </span>
  );
};

export default FunctionComponent;

And then you can make custom hooks to use the methods provided by the API:

import { useIntl } from 'react-intl'

export function useFormatMessage(messageId) {
  return useIntl().formatMessage({ id: messageId })
}

Answer 6

• You can use intl prop from injectIntl HoC
• You can also provide function as child component:

<FormattedMessage {...messages.placeholderIntlText}>
  {(msg) => (<input placeholder={msg} />)}
</FormattedMessage>