Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React.js & i18n
Search
Eric Ferraiuolo
January 28, 2015
Programming
2
470
React.js & i18n
http://formatjs.io/
Eric Ferraiuolo
January 28, 2015
Tweet
Share
More Decks by Eric Ferraiuolo
See All by Eric Ferraiuolo
Node on the Road
ericf
1
100
Pure
ericf
7
950
YUI and The Future
ericf
2
730
YUI 3.10.0 — Go Fast
ericf
3
570
YUI, Open Source, and Community
ericf
0
430
Advocatus Diaboli – Throne of JS
ericf
8
16k
Y.App: Coordinating URL Navigation, Routing, and Managing Views
ericf
10
2.1k
Other Decks in Programming
See All in Programming
Langfuseと歩む生成AI活用推進
licux
3
290
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
470
Laravel Boost 超入門
fire_arlo
1
120
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
akatsukigames_tech
0
150
Flutterと Vibe Coding で個人開発!
hyshu
1
260
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
1
210
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
200
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
13
2.8k
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
900
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
画像コンペでのベースラインモデルの育て方
tattaka
3
1.8k
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
Gamification - CAS2011
davidbonilla
81
5.4k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Embracing the Ebb and Flow
colly
87
4.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Navigating Team Friction
lara
189
15k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Transcript
React.js & i18n @ericf - Yahoo ReactConf
1.002 2/1/2015
But I only care about English in the USA!
English 5.2% 27% Native Speakers Internet Users Source: Wikipedia
None
None
None
Formatting
None
None
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
Intl.NumberFormat Intl.DateTimeFormat Intl.Collator
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
<FormattedNumber value={1000} /> <FormattedDate value={Date.now()} month="long" day="numeric" year="numeric" /> React
Intl 1,000 January 28, 2015
<p className=“post-meta”> Posted <FormattedRelative value={this.props.date} /> </p> Relative Times Posted
3 hours ago
“Hello, {name}!” “You’re {age, number} years old.” String Messages
var msg = `{numComments, plural, one {# comment}
other {# comments} }`; <FormattedMessage message={msg} numComments={1} /> Pluralization 1 comment
var msg = `{numComments, plural, one {# comment}
other {# comments} }`; <FormattedMessage message={msg} numComments={1200} /> Pluralization 1,200 comments
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
7.7k 150+ React Intl min + gz languages English as
default
None
CLDR ICU JS Runtimes (Intl.*) Format.js Core Format.js Integrations
Intl.MessageFormat Intl.RelativeFormat Future Intl Built-ins?
Questions? formatjs.io @ericf - Yahoo ReactConf