react-intl FormatMessage: Translating Strings in React

You need to translate strings in both React components and imperative JS code using react-intl.

Use the useIntl hook for imperative code and <FormattedMessage> component for JSX. Both resolve message IDs from the IntlProvider messages map.

import { IntlProvider, FormattedMessage, useIntl } from 'react-intl';

// Root setup
<IntlProvider
  locale="en"
  messages={{ 'greeting': 'Hello, {name}!', 'count': '{count, plural, one {# item} other {# items}}' }}
>
  <App />
</IntlProvider>

// JSX usage
function Header() {
  return <h1><FormattedMessage id="greeting" values={{ name: 'Alice' }} /></h1>;
}

// Imperative usage (e.g., for title attributes)
function SearchInput() {
  const intl = useIntl();
  return (
    <input
      placeholder={intl.formatMessage({ id: 'search.placeholder' })}
    />
  );
}

react-intl centralizes all translation strings in a messages map injected via context, enabling swapping at runtime and extraction by tooling (babel-plugin-react-intl, formatjs CLI).