ES6 Proxy and Localization

Maybe you’ve heard of JavaScript Proxy and think, “Hey that’s cool and such, but what should I use it for?” Don’t worry, I thought this too until recently when I needed a catch-all solution. And BEHOLD, the indirect intermediary known only as “Proxy” arose from the ashes and set ablaze all Text Editors throughout the known universe. In my use case, I wanted to pass back an object (more like a dictionary) that would contain key/value pairs for each localized string in the application. But the magic sauce here is that any missing string should return a See-No-Evil monkey emoji (🙈) because that means the developer mistyped a letter or maybe the string wasn’t translated at all! The monkey will not judge you. Let’s look at some example JSON that is emitted when a good ol’ chap from across the pond visits our application (someone using ). en-GB { "color": "Colour", "elevator": "Lift", "pants": "Trousers"} At first, you might think that the could solve our problem because you can override a property (such as ) and check if there is no value defined. But what about the keys you don't know about? You don't know what you don't know. ES5 Getter elevator Enter the , where Bruce Lee plays a web developer determined to help capture the missing keys responsible for the death of his sister. Proxy let obj = JSON.parse(json);let l10n = new Proxy(obj, { get(target, name) { if (typeof target[name] === 'undefined') { console.error(`Localized string is missing: ${name}`); return '🙈'; } return target[name]; }}); We call the localization object because we're lazy and this abbreviation is commonly used according to and other lazy devs. Ain't nobody got time for typing. Why am I writing this article anyway? l10n Wikipedia Now back to the topic of Proxy usage…let’s talk about React. React is great and you should use it because the internet told you so and that one blogger blogged about it on their weblog so don’t challenge the blog. Embrace the blogosphere. const SelectAColor = (props) => ( {props.l10n.color}: {props.colors.map(c => {c} )} ); Now that we have a React component, let’s see how it would render for users from different countries. USA looks A-OK! Great Britain looks great! Mexico is ¡Ay, caramba! We forgot to translate into Spanish! The monkey does not lie but the monkey is forgiving. The same would happen if you misspelled for example in which case, the monkey would visit you again, shielding its eyes from your incompetence. props.l10n.color props.l10n.colr If you would like to see a demo, visit to see the code in action and witness the magnificent monkey madness! CodeSandbox Originally published at www.ceriously.com on January 1, 2018.