README
React Numeric Input
Number input component that can replace the native number input which is not yet very well supported and where it is, it does not have the same appearance across the browsers. Additionally this component offers more flexible options and can be used for any values (differently formatted representations of the internal numeric value).
Live demo
Installation
npm install react-numeric-input --save
Then in your scripts:
// es6
import NumericInput from 'react-numeric-input';
// or es5
var NumericInput = require('react-numeric-input');
// or TypeScript
import * as NumericInput from "react-numeric-input";
Usage
Minimal Usage:
This will behave exactly like <input type="number">
. It will create an empty
numeric input that starts changing from zero. The difference that this works on
any browser and does have the same appearance on each browser.
<NumericInput/>
// or:
<NumericInput className="form-control"/>
Typical Usage
Most of the time you will need to specify min
, max
and value
:
<NumericInput min={0} max={100} value={50}/>
Working with floats
You can use step
and precision
props to make your input working with
floating point numbers:
<NumericInput step={0.1} precision={2} value={50.3}/>
Snap to step
If you want your component to "snap" to the closest step value while incrementing
or decrementing (up/down buttons or arrow keys) you can use the snap
prop:
<NumericInput step={0.5} precision={2} value={50.3} snap/>
Strict vs Loose Mode
You can type any value in the input as long as it is in focus. On blur, or when
you attempt to increment/decrement it, the value will be converted to number.
If you don't want this behaviour, pass strict
in the props and any value that
cannot be converted to number will be rejected immediately.
Custom format
By default the component displays the value number as is. However, you can
provide your own format
function that will be called with the numeric value
and is expected to return the string that will be rendered in the input:
function myFormat(num) {
return num + '