redux-form-numeric-field

redux-form-numeric-field

A customized redux-form Field for entering numbers. It isn't contrary; it won't stop you from typing, pasting, or cutting any characters, though it will produce a "must be a number" validation error immediately if the current input is invalid. When it loses focus it will normalize its value to a number, if valid; otherwise it will trim its value but leave it as a string.

Usage

npm install --save redux-form-numeric-field

const { NumericField } = require('redux-form-numeric-field')

or

const { NumericField } = require('redux-form-numeric-field/immutable')

Example

The following field will normalize its value to a number when it loses focus (unless the text is not a valid number, in which case it will just trim the text when it loses focus).

<NumericField name="value" component={YourInputComponent} />

API

NumericField

Has the same API as redux-form's Field, but normalizes its value to a number when it loses focus (unless the text is not a valid number, in which case it will just trim the text when it loses focus).

normalizeNumber?: (value: ?(string | number)) => ?(string | number)

Allows you to override the default implementation which is called on blur. If value is a number or correctly-formatted string, return a number; otherwise, return a string or null.

normalizeOnBlur?: (value: ?(string | number)) => ?(string | number)

If you provide this, it will be called with the output of normalizeNumber when the field loses focus.

validate?: Validator | Array<Validator>

Unlike a normal Field, NumericField will call your validators with the normalized value from normalizeNumber. If its value is an invalid number but not whitespace, it will produce a "must be a number" validation error without calling your own validators.