Kiko Beats
Internationalization is difficult to get right at the best of times, luckily there is a well supported API for it now in most browsers.
The method Object.prototype.toLocaleString() will format the current Number/Date/Object state into an international string locale representation.
const formatDate = ({
month = 'short',
day = 'numeric',
year = 'numeric'
} = {}) => (timestamp = new Date(), lang = 'en-us') =>
new Date(timestamp).toLocaleString(lang, { month, day, year })
Using it on action
const formattter = formatDate()
formatter() // 'Dec 6, 2018'
The new Intl API introduces .RelativeTimeFormat for formatting time.
const rtf = new Intl.RelativeTimeFormat('en')
rtf.format(3.14, 'second')
// → 'in 3.14 seconds'
rtf.format(-15, 'minute')
// → '15 minutes ago'
Although it looks promising, still it’s an early stage. Alternatively, you can use ms or pretty-ms packages.
The same approach could be used for format a Number:
const formatNumber = ({ style = 'currency', currency = 'CAD' } = {}) => (
n,
lang = 'en-US'
) => n.toLocaleString('de-DE', { style, currency })
Using it on action
const formatter = formatNumber()
const amount = 1034532
formatter(1034532) // 🇺🇸 USA
formatter(1034532, 'de-DE') // 🇩🇪 Germany
formatter(1034532, 'ar-EG') // 🇺🇪🇬 Egypt
You can use the browser for getting the user language preference
const locale = navigator.language || navigator.userLanguage || 'en-US'
That’s could be a good point to start. Next step could remember the user preference and store it associated with the user profile settings.
Kiko Beats