How to use React-Intl’s FormattedMessage Component in an Input Placeholder?

Sometimes, we want to use React-Intl’s FormattedMessage component in an input placeholder.

In this article, we’ll look at how to use React-Intl’s FormattedMessage component in an input placeholder.

React-Intl’s FormattedMessage Component in an Input Placeholder

To use React-Intl’s FormattedMessage component in an input placeholder, we can call the intl.formatMessage method to return a string with the translated message.

For example, we can write:

import React from "react";
import { IntlProvider, useIntl } from "react-intl";

const messages = {
  message: "enter your name"
};

const ChildComponent = () => {
  const intl = useIntl();
  const placeholder = intl.formatMessage({ id: "message" });

  return <input placeholder={placeholder} />;
};

export default function App() {
  return (
    <IntlProvider messages={messages} locale="en" defaultLocale="en">
      <ChildComponent />
    </IntlProvider>
  );
}

We have the message object with the messages.

Then we have the ChildComponent component that calls the useIntl hook to get the intl object.

Then we call intl.formatMessage with an object that has the id property set to the key with the message to return the translated message.

And then we can set the returned string as the value of the placeholder .

Finally, we wrap IntlProvider around the ChildComponent so we can use the formatMessage method.

We set the messages to an object with the messages.

locale and defaultLocale are set to the locales.

Conclusion

To use React-Intl’s FormattedMessage component in an input placeholder, we can call the intl.formatMessage method to return a string with the translated message.