React.js & i18n

http://formatjs.io/

Transcript

1. React.js & i18n @ericf - Yahoo ReactConf
2. 1.002 2/1/2015
3. But I only care about English in the USA!
4. English 5.2% 27% Native Speakers Internet Users Source: Wikipedia
8. Formatting
11. function numberWithCommas(x) { var parts = x.toString().split("."); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); return parts.join("."); } “How to print a number with commas as thousands separators in JavaScript?” 25 Answers
12. Intl.NumberFormat Intl.DateTimeFormat Intl.Collator
13. new Intl.NumberFormat().format(1000); new Intl.DateTimeFormat({
 month: 'long',
 day : 'numeric',
 year : 'numeric'
 }).format(Date.now());
 1,000 January 28, 2015 Intl Built-ins
14. <FormattedNumber value={1000} /> <FormattedDate value={Date.now()}
 month="long"
 day="numeric"
 year="numeric" />
 React Intl 1,000 January 28, 2015
15. <p className=“post-meta”>
 Posted <FormattedRelative value={this.props.date} />
 </p>
 Relative Times Posted 3 hours ago
16. “Hello, {name}!” “You’re {age, number} years old.” String Messages
17. var msg = `{numComments, plural, 
 one {# comment} 
 other {# comments}
 }`; <FormattedMessage message={msg}
 numComments={1} /> Pluralization 1 comment
18. var msg = `{numComments, plural, 
 one {# comment} 
 other {# comments}
 }`; <FormattedMessage message={msg}
 numComments={1200} />
 Pluralization 1,200 comments
19. var App = React.createClass({
 mixins: [IntlMixin],
 render: function () {
 return <FormattedNumber value={this.props.price}
 style="currency"
 currency="USD" />
 }
 }); React.render(
 <App locales="fr-FR" price={1099.95} />,
 document.getElementById("container")
 ); Intl Mixin 1 099,95 $US
20. 7.7k 150+ React Intl min + gz languages English as default
22. CLDR ICU JS Runtimes (Intl.*) Format.js Core Format.js Integrations
23. Intl.MessageFormat Intl.RelativeFormat Future Intl Built-ins?
24. Questions? formatjs.io @ericf - Yahoo ReactConf