[HowTo] Format attributes like input placeholders

[pke]

The main page states, that ReactIntl.formatMessage will be deprecated in 2.0 and replaced by another API. How should we translate element attributes for the time being?

[ericf]

Here's some details on upgrading to v2, the full guide hasn't been written yet: #193 (comment)

There is still an imperative API to format things like input placeholders, but the signature is now different:

formatMessage(messageDescriptor, values);

Where a message descriptor looks like:

{
    id: 'greeting',
    defaultMessage: 'Hello, {name}',
    description: 'A note to explain the context to the translator'
}

You can see an example here: https://github.com/yahoo/react-intl/blob/master/examples/translations/src/client/components/locales-menu.js

[pke]

Thanks, that's a lot of API change indeed. I am not sure the new inject is better than the mixin. With the mixin it was pretty clear when you parsed the class to see it on top. Now the "magic" happens at the very bottom and you lose the short form of just writing this.formatMessage

What was the reason/idea behind to remove the mixin?

Also as a bonus question I wonder why the intl prefix instead of the (more common) i18n was chosen?

[ericf]

Also as a bonus question I wonder why the intl prefix instead of the (more common) i18n was chosen?

The name of the lib is "react-intl", the name of the JavaScript APIs that it builds on are Intl.. You can choose any name you want for the prop:

injectIntl(Component, {intlPropName: 'i18n'});

What was the reason/idea behind to remove the mixin?

Mixins don't work with components defined as ES6 classes without some user-land solution, nor stateless arrow function components. The move away from mixins is inline with React's functional nature. Mixins are an OOP concept, with injectIntl the imperative API is provided to your component on props, which could simply be a function. This is also aligning with how Flux libraries provide access to stores and dispatching actions.

[pke]

Thanks for the explanations. Being new to the whole react world and skimming the eco-system at the moment. Have a lot to learn.

injectIntl(Component, {intlPropName: 'i18n'});

That's cool!