当前位置：首页 > 软件库 > Web应用开发 > 常用JavaScript包 >

react-intl-currency-input

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、常用JavaScript包

软件类型开源软件

地区不详

投递者秋阳荣

操作系统跨平台

开源组织无

适用人群未知

软件概览

react-intl-currency-input

A React component for i18n currency input using Intl API.

Installation

$ npm install react-intl-currency-input --save-dev

How to use

import React from "react"
import IntlCurrencyInput from "react-intl-currency-input"

const currencyConfig = {
  locale: "pt-BR",
  formats: {
    number: {
      BRL: {
        style: "currency",
        currency: "BRL",
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      },
    },
  },
};

const BrlCurrencyComponent = () => {
  const handleChange = (event, value, maskedValue) => {
    event.preventDefault();

    console.log(value); // value without mask (ex: 1234.56)
    console.log(maskedValue); // masked value (ex: R$1234,56)
  };

  return(
    <IntlCurrencyInput currency="BRL" config={currencyConfig}
            onChange={handleChange} />
  );
}

export default BrlCurrencyComponent;

Example

To run the example:

$ npm run example:start

And a new browser window will open at http://localhost:3000

Properties

Name	Type	Default	Description
defaultValue	number	0	Sets the default / initial value to be used by the component on the first load
currency	string	USD	Sets the currency code
config	object	USD related configuration	Configuration object compliant with react-intl intlShape
autoFocus	boolean	false	Enables auto-focus when the component gets displayed
autoSelect	boolean	false	Enables auto-select when the component gets displayed
autoReset	boolean	false	Resets component's internal state when loses focus
onChange	function	undefined	`(event, value, maskedValued) => {}` Exposes the `Event` itself, the `value` with no mask and `maskedValue` for displaying purposes
onFocus	function	undefined	`(event, value, maskedValued) => {` Called when the component gains focus
onBlur	function	undefined	`(event, value, maskedValued) => {` Called when the component loses focus
onKeyPress	function	undefined	`(event, key, keyCode) => {}` Called when a `key` is pressed
max	number	undefined	Maximum value for the input. Input does not change if the value is greater than max

All the other undocumented properties available for any React Component should also be available.

TO-DO

Add unit tests
Add a Storybook for examples and UI tests

react-intl-currency-input

react-intl-currency-input

Installation

How to use

Example

Properties

TO-DO

同类工具

相关阅读

相关文章

相关问答

相关文档