A multi-purpose React number component with variants for numbers, currencies, and percentages

Features include:

• format number on-blur; unformat on-focus
• format based on locale and currency
• min and max
• variable number of decimals places
• show error messages (above or below input)
• output an event with the input value (on-change or on-blur)

Live demo with examples

https://react-number-variants.netlify.com/

GitHub

https://github.com/MachineLlama/react-number-variants

NPM

https://www.npmjs.com/package/react-number-variants

Usage

npm install react-number-variants --save
or
yarn add react-number-variants

In your React component:

import Number from 'react-number-variants';

Simple example:

<Number
  inputClassName="form-control"
  minNumberOfDecimals={1}
  maxNumberOfDecimals={3}
  onEvent={(event, value) =>
    this.setState({ event, value })
  }
/>

License

Absolutely none; feel free to clone and use any part of this code anywhere you want

Props (all optional)

|Prop |Description |Type |Default | |--|--|--|--| |id |ID of the entire Number component container |string |'react-number-variants' |inputId|ID of the input box|string|'number-input' |className|ClassName of the entire Number component container|string|'number-container' |inputClassName|ClassName of the input box|string|'number-input' |value|The default starting value for the input|number|null |type| The type of number rendered; either 'number', 'percent', or 'currency'|string|'number' |locale|The locale of the number rendered|string|'en-US' |currency|If type is set to 'currency', then this prop will determine the symbol displayed|string|'USD' |min|The minimum value the number can be|number|null |max|The maximum value the number can be|number|null |minNumberOfDecimals|Minimum number of decimal places allowed for value|number|0 (can't be less than 0) |maxNumberOfDecimals|Maximum number of decimal places allowed for value|number|20 (can't be greater than 20) |showError|Determines whether to show the error message or not|boolean|false |errorId|ID of the error message|string|'error-message' |errorClassName|ClassName of the error message|string|'error-message' |errorLocation|Location of the error message. Can be either 'top' or 'bottom', relative to the input box|string|'bottom' |errorMessage|The error message displayed|string|'error' |emitOnChange|Determines whether to emit an event message on-change (can be used for performance or validation purposes)|boolean|true |emitOnBlur|Determines whether to emit an event message on-blur|boolean|true |onEvent|Function that can be used to get the event name and value from the input. Can be used to drive external events in your React component (like with validation to show the error message)|function|null |disabled|Disable input|boolean|false |placeholder|Placeholder text|string|undefined