Internationalizing React
summary
Claims that a small architecture makes adding dozens of locales easy and demonstrates it by building a working prototype called Sunset Central that supports Spanish (Spain) and Arabic (Egypt). Implements a translations map keyed by IDs, exposes a translate function via React contexts and custom hooks, localizes timestamps with JavaScript Intl for dates, and handles right‑to‑left layouts by flipping CSS objects with rtl-css-js before rendering. The prototype renders translated text, localized dates, and flipped layouts and scales to many more locales.
AI-written summary · about
chapters (21)
- 0:00Introduction
- 0:35Meet Daria
- 1:32Learning Languages
- 2:18Maintaining Languages
- 2:42Drawing Parallels
- 3:22Vocabulary
- 5:42Sunset Central
- 7:01Sunset Central Expansion
- 7:20Sunset Central Locales
- 8:22Architecture Solutions
- 9:22Translation Structure
- 10:00Translate Function
- 10:40Mountain Button
- 11:42Date Libraries
- 12:35Date Math
- 13:58Arabic
- 15:34CSS Direction
- 18:47Use Styles
- 19:19Apply Styles
- 21:07Learning languages is hard
- 21:26Outro
related talks
25mLocalization: Implementation and Testing... Locally
39mDo the Right (to Left) Thing: Directional Content in React
29mMake apps for a global audience - Naomi Meyer
12mThere's always a better way to handle localization
29mDirectional Content in React
29mDo the Right (to Left) Thing Directional Content in React
26mEnd-to-End i18n
08mLocalization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands