[React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
Using a react-intl FormattedNumber component, we'll pass a Number and a few additional props in order to render the correct separator and currency symbols for different languages.
For example we have price data as such:
"price": {
"en-US": "16.19",
"es-ES": "15.09",
"fr-FR": "15.09"
},
We can use FormattedNumber to display the correct currency.
let locale = (navigator.languages && navigator.languages[0])
|| navigator.language
|| navigator.userLanguage
|| 'en-US'; <p>
<FormattedNumber
style='currency'
currency={locale === 'en-US' ? 'USD': 'EUR'}
currencyDisplay='symbol'
value={merchant.price[locale]} />
</p>
[React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber的更多相关文章
- 《React Native 精解与实战》书籍连载「React Native 源码学习方法及其他资源」
此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React Native 源码学习方法及其他资源. 最后的章节给大家介绍 React Native ...
- 《React Native 精解与实战》书籍连载「React Native 底层原理」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 《React Native 精解与实战》书籍连载「React 与 React Native 简介」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative
Given a date, we’ll use the react-intl FormattedRelative component to render a date in a human reada ...
- [React Intl] Format Date and Time Using react-intl FormattedDate and FormattedTime
Using the react-intl FormattedDate and FormattedTime components, we’ll render a JavaScript Date into ...
- 深入React事件系统(React点击空白部分隐藏弹出层;React阻止事件冒泡失效)
只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲 ...
- 《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 《React Native 精解与实战》书籍连载「React Native 中的生命周期」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- [React] Use the URL as the source of truth in React
In Single Page Apps we're used to fetch the data on event callbacks. That disables the capacity to u ...
随机推荐
- [转]LNMP环境下的Web常见问题排查(精品)
来源:http://mp.weixin.qq.com/s? __biz=MjM5NzUwNDA5MA==&mid=200596752&idx=1&sn=37ecae802f32 ...
- uva103 - Stacking Boxes(DAG)
题目:uva103 - Stacking Boxes(DAG) 题目大意:给出N个boxes, 而且给出这些箱子的维度.要求找一个最长的序列.可以使得以下的箱子一定可以有个维度序列大于上面的那个箱子的 ...
- js---12数据类型,数据类型转换,NaN,
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 关于li的排列,我的面试题
来到北京的第二周,收到了单位的面试,一面的时候面试官问了微信钱包里的那个快速入口的排列,我当时在面试官的引导下答的还可以,但是在实际中有很多的方法和各自不同的问题,我来总结下. 1.flex布局,其实 ...
- 雷观(二十三)-IT互联网技术,不拼创新拼努力,特别低公平
上次发表"雷观(二十二)"是在2015年3月7日,一转眼,就快到了11月. 前段时间,终于狠下心来,写了本篇,第二十三啦. 小雷同志,要加油了~ 早日达到百篇雷观的里程碑~ ...
- FZU 1921 栀子花开
栀子花开 Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on FZU. Original ID: 19216 ...
- hdu2768Cat vs. Dog (反建法,最大独立集)
Cat vs. Dog Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...
- svn: Can't convert string from 'UTF-8' to native encoding 解决的方法
今天在down代码时遇到了例如以下问题: [xxx@xxx ~]$ svn co https://xxxxxxxxxxxxx svn: Can't convert string from 'UTF-8 ...
- 对AWS的计费有点糊涂
对AWS的计费有点糊涂 今天收到亚马逊的账单,就两笔 1. US West (Oregon) Region Elastic IP Addresses $0.005 per Elastic IP ...
- Android学习笔记进阶16之BitmapShader
<1>简介 具体的看一下博文:Android学习笔记进阶15之Shader渲染 public BitmapShader(Bitmap bitmap,Shader.TileMode ti ...