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 | $ |