react-enhanced-numeric-input
An enhanced Numeric Input made with React
Docs: https://react-enhanced-numeric-input.netlify.app/
Install
To install the component, just type:
npm install react-enhanced-numeric-input
or
yarn add react-enhanced-numeric-input
Using
To use it, you will need to import the component and use it like:
import NumericInput from "react-enhanced-numeric-input";
<NumericInput />
Example
<NumericInput decimalPrecision={2} value={50} />
Styles
The new version includes some default styles to format the money and percent input. To use it, it is necessary to import the styles in the project distribution pack.
Example
import "react-enhanced-numeric-input/dist/react-enhanced-numeric-input.css";
Properties
It is possible to set some properties globally.
Setting default properties
Some properties need to be set systemwide. To do so, it is necessary to import the function that defines it and set a new value.
Default values
| Property | Default Value |
|---|---|
| moneyMask | \$ |
| percent | % |
| decimalSeparator | , |
| thousandSeparator |
Example
import {setDefaultMoneyMask,setDefaultPercent,setDefaultDecimalSeparator,setDefaultThousandSeparator,} from "react-enhanced-numeric-input";setDefaultMoneyMask("US$");setDefaultPercent("percent");setDefaultDecimalSeparator(".");setDefaultThousandSeparator(",");
Properties list
| Property | Type | Default Value |
|---|---|---|
| className | string | - |
| decimalPrecision | number | 0 |
| disabled | boolean | false |
| maxLength | number | 20 |
| id | string | - |
| name | string | - |
| placeholder | string | - |
| onChange | function | - |
| onBlur | function | - |
| onClick | function | - |
| onFocus | function | - |
| onKeyPress | function | - |
| style | string | - |
| value | string or number | - |
| percent | boolean | false |
| money | boolean | false |
| stringValueOnBlur | boolean | false |
| decimalSeparator | string | , |
| thousandSeparator | string | |
| moneyMask | string | \$ |