[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 ...
- Http post提交和get提交
public string PostParameter(string url) { string message=""; GetOrde ...
- html5中的空格符
html5中的空格符 1,Html中空格 不断行的空白(1个字符宽度) 半个空白(1个字符宽度) 一个空白(2个字符宽度) 窄空白(小于1个字符宽度) 2,Css ...
- ubuntu下eclipse java ee首次打开提示找不到jdk的问题
最近想搭建一个本地服务器,方便写一些网络请求相关的demo,遂下载了eclipse ee版 ( IDEA证书好贵,暂时不想买-=-),下载---解压 一切正常,但是当在terminal下打开ecli ...
- Python day字符串所有使用
字符串所有的操作name = "dio"names = "my\t name is {Name} and i am a {job}"print(name.cap ...
- JNDI学习总结(1)——JNDI入门
JNDI是 Java 命名与目录接口(Java Naming and Directory Interface),在J2EE规范中是重要的规范之一,不少专家认为,没有透彻理解JNDI的意义和作用,就没有 ...
- JavaScript学习总结(10)——实用JS代码大全
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event. ...
- [TypeScript] Shallow copy object by using spread opreator
For example we have an object: const todo = { text: "Water the flowers", completed: false, ...
- 【剑指Offer学习】【面试题49:把字符串转换成整数】
题目:实现一个函数stringToInt,实现把字符串转换成整数这个功能.不能使用atoi或者其它相似的库函数. 题目解析 这看起来是非常easy的题目,实现基本功能 ,大部分人都能用10行之内的代码 ...
- Vue 消息无缝滚动
vue实现消息向上无缝滚动效果 <ul class="new-list" :class="{anim:animate}" @mouseenter=&quo ...