https://github.com/jcoreio/redux-form-numeric-field

a customized redux-form Field for entering numbers
https://github.com/jcoreio/redux-form-numeric-field

form-validation formatted-input input-validation numeric-input redux-form

Last synced: about 2 months ago
JSON representation

a customized redux-form Field for entering numbers

• Host: GitHub
• URL: https://github.com/jcoreio/redux-form-numeric-field
• Owner: jcoreio
• License: mit
• Created: 2018-01-12T21:59:10.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-03-05T23:49:03.000Z (about 1 year ago)
• Last Synced: 2025-02-01T01:41:37.902Z (4 months ago)
• Topics: form-validation, formatted-input, input-validation, numeric-input, redux-form
• Language: TypeScript
• Homepage:
• Size: 4.36 MB
• Stars: 0
• Watchers: 4
• Forks: 0
• Open Issues: 27
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# redux-form-numeric-field

[![Build Status](https://travis-ci.org/jcoreio/redux-form-numeric-field.svg?branch=master)](https://travis-ci.org/jcoreio/redux-form-numeric-field)

[![Coverage Status](https://codecov.io/gh/jcoreio/redux-form-numeric-field/branch/master/graph/badge.svg)](https://codecov.io/gh/jcoreio/redux-form-numeric-field)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

[![npm version](https://badge.fury.io/js/redux-form-numeric-field.svg)](https://badge.fury.io/js/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

```sh

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

```

```js

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

```

or

```js

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).

```js

```

## 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`

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.