Document why <Formatted*> components are better than the imperative API

[slorber]

Hi,

Just wanted you to be aware that we had in Paris a ReactJS Meetup about I18n and I asked a question nobody could answer: what's the advantage of using React components for formatting instead of using directly the - maybe deprecated - mixin API this.format().

I think it should be clearly documented what are the advantages of a component over an imperative API

The only thing I guess so far is maybe the possibility to inject React components as template parameters, and maybe cacheability but I'm not sure at all :)

[ericf]

This is a good idea and I can add docs about this. That said, there will be an imperative API because it's still needed for certain types of formatting; e.g., an element's prop value, like <input placeholder={someFormattedString} />.

A major area where the components provide value is in composition of complex messages See: https://github.com/yahoo/react-intl/blob/master/src/components/message.js

And as we gain more guidance from React on context and shouldComponentUpdate(), the components can abstract away whether or not the relatively expensive format() methods need to be called during a re-render.

[export-mike]

Yes I'm trying to pass in placeholder values, I'm using 2.0.0-beta-2, I've looked a the code and can't see a way to do this?

[slorber]

@export-mike

var placeholder = this.props.intl.formatMessage({ id: "searchBar.searchPlaceholder" });

[export-mike]

hmmm. shame I can't get this to be apart of all props in some way without having to decorate many components. thanks for your help @slorber

[slorber]

@export-mike be part of all props is like using react context, and decorator only extracts from the context.

What is your problem with the following I don't understand?

var React = require("react");
var ReactIntl = require("react-intl");

var SearchBar = React.createClass({
        ...
    render() {
        var placeholder = this.props.intl.formatMessage({ id: "searchBar.searchPlaceholder" });
        var inputValue = this.input();
        return (
                <input
                    value={inputValue}
                    onChange={this.onInputChange}
                    forceVisibility={this.isValid(inputValue)}
                    placeholder={placeholder}
                />
        );
    }
});

module.exports = ReactIntl.injectIntl(SearchBar);

[ericf]

@export-mike are you talking about <input placeholder=""> or passing in values to fill placeholders inside of messages? For the former, what @slorber said, for the latter:

<FormattedMessage
  id="greeting"
  defaultMessage="Hello, {name}!"
  values={{
    name: 'Eric'
  }}
/>

[export-mike]

It's to populate a property that expects a string such as placeholder. I'm
now using injectIntl on my components but being more aware/cautious on what
components should be coupled to InjectIntl.

On Fri, 12 Feb 2016 19:50 Eric Ferraiuolo [email protected] wrote:

@export-mike https://github.com/export-mike are you talking about or passing in values to fill placeholders inside of
messages? For the former, what @slorber https://github.com/slorber
said, for the latter:

<FormattedMessage
id="greeting"
defaultMessage="Hello, {name}!"
values={{
name: 'Eric'
}}/>

—
Reply to this email directly or view it on GitHub
#117 (comment).

[ericf]

@export-mike Here are some docs on the injection API: https://github.com/yahoo/react-intl/wiki/API#injection-api

[ericf]

Put some details on "Why Component?" on the Wiki:
https://github.com/yahoo/react-intl/wiki/Components#why-components

[export-mike]

@ericf thanks for your help.