React

by alexb

HTML

<div id="app"></div>

CSS

body {
  background: #fff;
  font-family: Helvetica;
}

table {
  border-collapse: separate;
  border-spacing: 1em 0.5em;
}

th {
  font-weight: bold;
}

React

const nub = xs => xs.filter((x, i) => xs.indexOf(x) === i)

const userLocale = () => {
	const intl = new Intl.NumberFormat();
  return intl.resolvedOptions().locale;
}
      
const currencies = ['GBP', 'USD', 'CAD', 'AUD', 'EUR'];

const LocaleRow = ({ locale }) => {
	const formatMoney = (amount, currency) =>
  	new Intl.NumberFormat(locale, { style: 'currency', currency })
    	.format(amount);
      
	return (
  	<tr>
      <th>{locale}</th>
      {currencies.map(x => <td key={x}>{formatMoney(123.45, x)}</td>)}
  	</tr>
  );
}

const App = () => {
	const locales = nub([
  	userLocale(),
    'en-GB',
    'en-US',
    'en-AU',
    'en-CA',
    'en-FR',
    'en-DE'
  ]);
  
  return (
  	<table>
      <thead>
        <tr>
          <th>Locale</th>
          {currencies.map(x => <th key={x}>{x}</th>)}
        </tr>
      </thead>
      <tbody>
        {locales.map(x => <LocaleRow key={x} locale={x} />)}
      </tbody>
    </table>
  )
};

ReactDOM.render(<App />, document.querySelector("#app"))