React Enhanced Numeric Input
Edit page
ChangelogNumericInputReadmeInstallUsingExampleSetting default propertiesProperties list

Build Status

Netlify Status

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

PropertyDefault Value
moneyMask\$
percent%
decimalSeparator,
thousandSeparator

Example

import {
setDefaultMoneyMask,
setDefaultPercent,
setDefaultDecimalSeparator,
setDefaultThousandSeparator,
} from "react-enhanced-numeric-input";
setDefaultMoneyMask("US$");
setDefaultPercent("percent");
setDefaultDecimalSeparator(".");
setDefaultThousandSeparator(",");

Properties list

PropertyTypeDefault Value
classNamestring-
decimalPrecisionnumber0
disabledbooleanfalse
maxLengthnumber20
idstring-
namestring-
placeholderstring-
onChangefunction-
onBlurfunction-
onClickfunction-
onFocusfunction-
onKeyPressfunction-
stylestring-
valuestring or number-
percentbooleanfalse
moneybooleanfalse
stringValueOnBlurbooleanfalse
decimalSeparatorstring,
thousandSeparatorstring
moneyMaskstring\$