Upgrade Guide (v4 -> v5)

Breaking API Changes

  • Rich text formatting callback function is no longer variadic.

Before:

new IntlMessageFormat('a<b>strong</b>').format({
b: (...chunks) => <strong>{chunks}</strong>,
});

After:

new IntlMessageFormat('a<b>strong</b>').format({
b: chunks => <strong>{chunks}</strong>,
});
  • FormattedMessage render prop is no longer variadic.

Before:

<FormattedMessage defaultMessage="a<b>strong</b>">
{(...chunks) => <b>{chunks}</b>}
</FormattedMessage>

After:

<FormattedMessage defaultMessage="a<b>strong</b>">
{chunks => <b>{chunks}</b>}
</FormattedMessage>
  • Using FormattedMessage without a intl context will fail fast.

Why are we doing those changes?

Rich text formatting callback function is no longer variadic

  • We received feedback from the community that variadic callback function isn't really ergonomic.
  • There's also an issue where React chunks do not come with keys, thus causing warning in React during development.
  • The chunks by themselves are not enough to render duplicate tags, such as <a>link</a> and another <a>link</a> where you want to render 2 different hrefs for the <a> tag. In this case a: chunks => <a>{chunks}</a> isn't enough especially when the contents are the same. In the future we can set another argument that might contain metadata to distinguish between the 2 elements.

FormattedMessage render prop is no longer variadic

  • Same reasons as above.

Using FormattedMessage without a intl context will fail fast

  • This also comes from Dropbox internal developer feedback. FormattedMessage has a default English renderer that masks Provider setup issues which causes them to not be handled during testing phase.