[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 ...
随机推荐
- ZOJ 2562 HDU 4228 反素数
反素数: 对于不论什么正整数x,起约数的个数记做g(x).比如g(1)=1,g(6)=4. 假设某个正整数x满足:对于随意i(0<i<x),都有g(i)<g(x),则称x为反素数. ...
- spring set注入
上篇文章说到了构造器注入.可是有时候构造器注入并非非常好用,如今来看下set注入. 构造器注入博客地址:http://blog.csdn.net/luckey_zh/article/details/4 ...
- es6 ----- export 和 import
ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入. 下面列出几种import和export的基本语法: 第一种方式: 在lib.js文件中, 使用 expo ...
- Es5正则
##JSON(ES5) 前端后台都能识别的数据.(一种数据储存格式) XNL在JSON出来前 JSON不支持 undefinde和函数. 示列:let = '[{"useername&qu ...
- ajax的内容
ajax是什么? 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新,可以局部刷新而不必整个页面整体刷新. url的简单认识: 进入服务器的三种方式: 1.localhost:端口号 ...
- 【习题 8-6 UVA - 1611】 Crane
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 想把数字i从位置j移动到位置i 可以这样. 假设mov(x,y)表示将(x..x+len/2-1)和(x+len/2..y)交换. ...
- php中类的持久化如何实现
php中类的持久化如何实现 一.总结 一句话总结:PHP持久化通过serialize() 和 unserialize() 这两个函数来实现的. 1.持久化之后的对象保存到哪里? 将复杂的数组之类 ...
- Filebeat-1.3.1安装和设置(图文详解)(多节点的ELK集群安装在一个节点就好)(以Console Output为例)
前期博客 Filebeat的下载(图文讲解) 前提 Elasticsearch-2.4.3的下载(图文详解) Elasticsearch-2.4.3的单节点安装(多种方式图文详解) Elasticse ...
- 基于Linux系统的Nagios网络管理模块的实现
基于Linux 系统的Nagios网络管理模块的实现 1.引言 随着计算机网络的普及,网络管理已成为信息时代中最重要的问题之一.在现有的技术条件下,人们希望有一个更加稳定可靠的网络环境.计算机网络管理 ...
- HDU4825 Xor Sum(贪心+Trie树)
Problem Description Zeus 和 Prometheus 做了一个游戏,Prometheus 给 Zeus 一个集合,集合中包含了N个正整数,随后 Prometheus 将向 Zeu ...