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
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
390
Understanding Kotlin Multiplatform
l2hyunwoo
0
250
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
180
リッチエディターを安全に開発・運用するために
unachang113
1
350
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7.3k
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
4
810
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
150
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.3k
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
270
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
220
実践!App Intents対応
yuukiw00w
0
120
実践 Dev Containers × Claude Code
touyu
1
120
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Statistics for Hackers
jakevdp
799
220k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Faster Mobile Websites
deanohume
308
31k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
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