react-numeric-input

Number input component with more flexible options very easy to use and you can use it with Formik 👀.

Installation

npm install @deberoppa/react-numeric-input --save

Add it to your script like this:

// es6
import RNI from '@deberoppa/react-numeric-input';

Usage

Basic usage:

<RNI/>
// Or to add class:
<RNI className="my-custom-class1"/>

Common usage:

Most of the time you will need to specify min, max, value and step like the native numeric input.

<RNI min={0} max={100} step={5} value={60}/>

Floats usage :

You can use step and precision props to make the input working with floating point numbers.

<RNI step={0.25} precision={2} value={30.25}/>

Mobile mode :

In the mobile the input must change display so the click on the buttons will be comfortable.

<RNI mobile={true}/>

Adding prefix or suffix to the output:

You can add prefix or suffix to the value like this:

// Prefix
<RNI prefix="quot; value={30} /> // output:  $30
// Suffix
<RNI suffix="€" value={40}/> // output : 40€

Custom format:

You can add you custom format to the value.

function myCustomFormat(number) {
    return '$' + number + '$';
}
<RNI value={40} format={myCustomFormat}/> // output: $40$

ReadOnly or Disabled input

readOnly : The value cannot be updated by button's click or text entry. ( The input is only a display )
disabled : Disable the input.

// readOnly
<RNI readOnly /> 
// disabled
<RNI disabled />

With Formik

See the examples page here.

Props

Name	Type	Default
value	number or string	"" which converts to 0
min	number	Number.MIN_SAFE_INTEGER
max	number	Number.MAX_SAFE_INTEGER
step	number	1
precision	number	0
prefix	string	''
sufix	string	''
format	function	null
className	string	none
readOnly	true, false	false
disabled	true, false	false
mobile	true, false	false

Events

onChange - Event handler when the input's value changed

function onChangeHandler(valuer) {
    console.log(value)
}
<RNI value={9} onChange={onChangeHandler}/>

Contributors

This project was bootstrapped with create-react-library.

License

MIT © deberoppa7