Interface PackageIntlExtensions

Similar to formatMessage(), but supports rich text formatting.

React nodes are supported as input values, and custom tags can be implemented as react components. Note that the output is always a single react node.

Example with react node as value:

function Example() {
  const intl = useIntl();
  // Given i18n message "Hello, {name}!"
  // replaces 'name' with the given react node:
  const message = intl.formatRichMessage({ id: "foo"}, {
    name: <FancyUserName />
  });
  return <Box>{message}</Box>;
}
Copy

Example with basic formatting:

function Example() {
  const intl = useIntl();
  // Given i18n message "Hello, <strong>{name}</strong>!"
  // renders with actual <strong> html node:
  return <Box>{intl.formatRichMessage({ id: "foo"}, { name: "User" })}</Box>;
}
Copy

Note that only a few basic formatting tags are predefined ("b", "strong", "i", "em", "code", "br"). If you need more advanced tags, you can define your own, see below.

Example with custom tag:

function Example() {
  const intl = useIntl();
  // Given i18n message "Open <foo>the door</foo>!",
  // renders 'foo' using the formatter function below:
  const message = intl.formatRichMessage({ id: "foo"}, {
    foo: (parts) => <FancyTag>{parts}</FancyTag>
  });
  return <Box>{message}</Box>;
}
Copy