Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React.js & i18n

React.js & i18n

Cf33841918d90fe941f522dde5ee4ff0?s=128

Eric Ferraiuolo

January 28, 2015
Tweet

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

  5. None
  6. None
  7. None
  8. Formatting

  9. None
  10. None
  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
  21. None
  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