react-number-variants

1.2.16 • Public • Published

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

Package Sidebar

Install

npm i react-number-variants

Weekly Downloads

1

Version

1.2.16

License

SEE LICENSE IN license

Unpacked Size

14.3 kB

Total Files

6

Last publish

Collaborators

  • machinellama