[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 ...
随机推荐
- ubuntu-删除内核
今天进入公司第一天,公司需要给电脑安装ubuntu,这个是由it部门帮忙安装的.但是,我不小心升级了内核版本,接下来就悲剧了,因为内核版本升级以后,直接导致了环境错误,很多公司内部使用的工具都不能用了 ...
- 61.node.js开发错误——Error: Connection strategy not found
转自:https://blog.csdn.net/fd214333890/article/details/53457145
- Windows共享上网的详细设置
作者:朱金灿 来源:http://blog.csdn.net/clever101 在Windows环境下在A和B在同一个局域网上,A机子可以上网,B机子可以通过A机子可以通过设置的网络共享来上网.其中 ...
- 错误日志写入到本地磁盘(lock 队列)
今天照常在b站上看看编程:看到有讲错误日志处理的,自己没写过日志,就看看了看: 主要是在讲的时候牵扯到了队列和lock的知识点:这方面知识自己了解的更少,那就记录一下.
- 单调栈+贪心维护LIS
普通:O(\(N^2\)) 状态:dp[j]表示,以j结尾的最长的上升子序列 转移:dp[j]=dp[i]+1(if a[j]>a[i] ) 初始化:dp[i]=1 优化(nlogn) solu ...
- Dubbo学习总结(3)——Dubbo-Admin管理平台和Zookeeper注册中心的搭建
ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提供的功 ...
- Android SDK使用国内镜像站,解决下载速度慢无法更新?
1. 国内android开源镜像网站 下面是国内几个比較知名的开源网站.我用的是电子科技大学的镜像源,下载速度很快. mirrors.neusoft.edu.cn //东软信息学院 ubuntu.bu ...
- Android中的MVP架构初探
说来羞愧,MVP的架构模式已经在Android领域出现一两年了.可是到今天自己才開始Android领域中的MVP架构征程. 闲话不多说,開始吧. 一.架构演变概述 我记得我找第一份工作时,面试官问我& ...
- bootstrap之Orientation
Orientation 调整屏幕方向的操作. package io.appium.android.bootstrap.handler; import android.os.RemoteExceptio ...
- NET Framework 4.5 有更加简便的方法 Task.Run()
NET Framework 4.5 有更加简便的方法 Task.Run()