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

React.js & i18n

React.js & i18n

Eric Ferraiuolo

January 28, 2015
Tweet

More Decks by Eric Ferraiuolo

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. var msg = `{numComments, plural, 
 one {# comment} 


    other {# comments}
 }`; <FormattedMessage message={msg}
 numComments={1} /> Pluralization 1 comment
  4. var msg = `{numComments, plural, 
 one {# comment} 


    other {# comments}
 }`; <FormattedMessage message={msg}
 numComments={1200} />
 Pluralization 1,200 comments
  5. 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