the - sign is not showing

Does react-number-format allow negative number?

Why negative number is converted into positive number?

Hello,

I would be interested in an additional Prop for the NumberFormat component, that would allow the user to provide its own Input component implementation. This functional composition pattern would permit, among other thing, the integration of NumberFormat logic with existing input components like http://react-toolbox.com/#/components/input and many others

import MaterialDesignInput from 'react-toolbox/lib/input';

<NumberFormat inputComponent={MaterialDesignInput} />

Any though on that?

Hello!

Example:

Obs: Input is the component for create inputs and special management for mask inputs (contains format and anothers props...).

<Input
  type="text"
  label={__("% Ideal de cobertura")}
  id="name"
  name="name"                                                                            
  format={"### %"}                                                                
  required                                                                
  onChange={
  (event) => {
    }
   }
   value="eduardo"
 />

this format result:

Its possible use this component for this?
i need only for number 0-100 with percent format.

Thanks!

Hello,

It is currently impossible to import NumberFormat in the ES6 standard manner when using Typescript:

// Doesn't work
import NumberFormat from "react-number-format"

// Workaround
import NumberFormat = require("react-number-format")

It would also be great to include a typing declaration file for automatic auto-completion in IDEs. The following snippet should be a good basis:

declare module 'react-number-format' {
  export class NumberFormat extends React.Component<NumberFormatProps, any> {
    // Any public method on the NumberFormat component?
  }

  export interface NumberFormatProps extends React.HTMLAttributes<HTMLInputElement> {
    thousandSeparator?: boolean | ',' | '.' | ' '
    decimalSeparator?: boolean | ',' | '.'
    displayType?: 'input' | 'text'
    prefix?: string
    format?: string | Function
    mask?: string
    // value?: number | string
  }

  export default NumberFormat;
}

Could you add prop for display zero values instance of empty?

Thanks!

If field already contains zero value like '0.00' and at the beginning of input you will get '10.00' instead of '1.00'

Hello and thanks for this slick library! I have a request though:

I need to format a number like currency, so it should allow at the most 2 decimals but the should not be required.

So if I type, for example, 42 it should not add .00, but if the user begin to type decimal it should limit them to 2.

This can be achieved with the current version only with decimalPrecision set to false but in that way I can't limit the decimal to 2.

Do you think that could be a reasonable feature to add in the future?

Thank you.

This would be useful as I pass a different value into this component than persists on the dom. For instance, this component's input can hold 00001, but I would pass this as a value=1 to prevent leading zeroes.

I have a use case where I'm formatting a field, but I want to disable the button to continue unless the field is valid:

  handlePhoneChange(value) {
    console.log(value);
    this.setState({valid: value && value.length >= 10});
  }

...
                    <NumberFormat format="(###) ###-####"
                                  onChange={(e, value) => {this.handlePhoneChange(value)}}
                                  className="main-input"/>

However, whenever I call setState in my component, the field gets blanked out and user can't type anything in. I debugged it a bit and it turns out that componentWillReceiveProps is called and the newProps.value is null, which means it shows only an empty string.

Line 60 of number-format.js:

value: this.formatInput(newProps.value).formattedValue

Any ideas here? Thanks

Will this work with react native?

I tried to install and got a Transform Error from Babel:

TransformError: /Users/XXX/node_modules/react-number-format/lib/number_format.js: 
[BABEL] /Users/XXX/node_modules/react-number-format/lib/number_format.js: 
Unknown option: /Users/XXX/node_modules/react/react.js.Children. 
Check out http://babeljs.io/docs/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options. (While processing preset: "/Users/XXX/node_modules/react/react.js")

RCTFatal + 124
-[RCTBatchedBridge stopLoadingWithError:] + 1124
__25-[RCTBatchedBridge start]_block_invoke_2 + 76
<redacted> + 24
<redacted> + 16
_dispatch_main_queue_callback_4CF + 1000
<redacted> + 12
<redacted> + 1660
CFRunLoopRunSpecific + 444
GSEventRunModal + 180
<redacted> + 684
UIApplicationMain + 208
main + 124
<redacted> + 4

I want to round off any decimal places to get the integer values of floats, and I've tried both of these options:

<NumberFormat value={15124.704000000258} displayType={'text'} thousandSeparator={true} decimalPrecision={0} />
<NumberFormat value={15124.704000000258} displayType={'text'} thousandSeparator={true} decimalSeparator={false} />

The results are:

15124.undefined
15,124,704,000,000,258

We should have some way to round the result off to 15124.

First, let me thank you for this great component.

One question I couldn't find an answer anywhere : I have a requirement to reject certain values - for example I have a maximum value I allow users to type in - if user tries to type more then that amount I should prevent them from doing it (by not accepting the value - i.e. - the user won't be able to enter that in the input). What is the best to way to implement that in your component?

I was expecting your component to behave as a controlled component but I see that even if don't trigger the onChange (and don't modify the "value" state), the component shows the new amount entered. Any suggestions on how to implement that behaviour? Thanks!

@s-yadav in the new version, putting 000 as the input will cause the library to throw exception :

react.min.js:14 Uncaught TypeError: Cannot read property 'match' of undefined
    at NumberFormat.getCursorPosition (number_format.js:355)
    at NumberFormat.onChangeHandler (number_format.js:379)
    at NumberFormat.onChange (number_format.js:402)
    at Object.executeOnChange (react.min.js:12)
    at h.o (react.min.js:14)
    at Object.r (react.min.js:14)
    at i (react.min.js:12)
    at Object.s [as executeDispatchesInOrder] (react.min.js:12)
    at p (react.min.js:12)
    at f (react.min.js:12)

Thanks for creating this component with so many features.

I found below issues with IE.

1. Can type letters if you type fast
2. Cursor point is not moving correctly if we type two numbers same time. It stays in the middle
3. This may be relate to above #2 thousand separator is in wrong position if you type numbers to fast.

Are those known issues in your component and do you have any plan to fix them in near future?

PS: I added pull request for negative number support(#46). Please check is it your desired behaviour

For example format mask is #### ###### #####
I type 4111 1111 1111 1111
If I then type 0 I can typing any numbers after that and would appear as:
4111 1111 1111 1111089898883 for example

When the value is changed, in componentWillReceiveProps the display value is calculated
like so

but the formatInput method uses the this.props instead of the newProps which is sent to the componentWillReceiveProps.

I was updating the value and suffix props, but the new suffix was not used, instead the older suffix gets used as it is referring to this.props instead of newProps.

The solution is to pass the props along to the formatInput and the other methods it invokes so this.props is never used from inside them. However once you remove the reference to this.props, these methods no longer need to be bound to the class, they could simply be functions outside of the class.

I am happy to do a PR, but need your direction on what you prefer, send props as an additional argument to formatInput, getSeparators, getNumberRegex, formatWithPattern

or

remove these functions out of the class and have them as pure functions which take in just the necessary input arguments

The suggested solution above fixes not only the suffix but also prefix and the whole list of props getting updated

Update: it seems like the latest version 1.1.2 works on most devices, but non on my Google Pixel that uses 7.1.2. Version 1.0.2 works on my device, but sadly doesn't work on some other devices

Problem

When using format the cursor position behaves weird on mobile.
Here is a screencast of the problem on my Google Pixel; http://pudge.se/AznJH (recording from the codepen demo found in README)

The cursor always moves to the beginning.
I've tested on Redmi Note 3 and Galaxy Tab S3

Selector should be put before the prefix or after the suffix.

For instance, with prefix '$' you should never be able to type '0$'.
With suffix '%' you should never be able to type '%0'

I found just one way how to force component to use Integer not Decimal and it is to set decimalSeparator="". I think it'll be more intuitive to use something like decimalPrecision={0}, but in that case I had 0.undefined written in field. Is it possible to fix it, or explain some better way how to do it?

Hi,

I'm trying to set a suffix with a ".", and it is not working:

<NumberFormat 
      thousandSeparator={true} 
      prefix={'$'}
      suffix={' per sq. ft.'}
      placeholder={this.props.placeholder} 
      value={this.props.value} 
      onChange={(event, value) => console.log(value)} />

When I input something, nothing is displayed in the input and the console throws:

The specified value "NaN" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?

If I remove the dots from the suffix (per sq ft) it works ok.

Demo.

I'm trying to use react-number-format with my own components and thousandSeparator.
I need my input component to have defaultValue.
Am I doing something wrong?

Hi,

basically i would like to have number formatted in german formatting, e.g.
12.566.890,01

Is there a way to do it without extending the module?

I'm seeing ie11 errors with getCursorPosition. Seems like the match is trying to match on an inputvalue that is undefined or maybe not a string. My guess is that you could fix it by casting inputValue to a string. Here is the effected code:

	  getCursorPosition: function getCursorPosition(inputValue, formattedValue, cursorPos) {
	    var j = 0;
	    for (var i = 0; i < cursorPos; i++) {
	      if (!inputValue[i].match(/\d/) && inputValue[i] !== formattedValue[j]) continue;
	      while (inputValue[i] !== formattedValue[j] && j < formattedValue.length) {
	        j++;
	      }j++;
	    }

Hi,

I already installed this package and want to use it for currency input with custom thousand separator using dot (.)
For example I have a value 200000, I want to display it as 200.000
However, when I use the property thousandSeparator={'.'} it displayed as 2.00000

I also try on the demo from the codepen (http://codepen.io/s-yadav/pen/bpKNMa)
and it is the same

Is it the correct behavior from this package?

Thanks

Regards,

Irene

Hello,

I've noticed a bug with the Delete key handling. Let's say I have an input field with the number USD 1,000 in it. Let's use | to represent the cursor position.

Does that make sense?

Display error when pass value in decimal format with thousandSeparator option

<NumberFormat value={24569.81} displayType={'text'} thousandSeparator={true} prefix={'$'} />

The output is $2,456,981 it's should be $24,569.81

When inputting a character, caret first goes to the last position and then comes to correct position. This is side effect of fix for mobile where we require to set caret position within timeout of 0ms

Is it possible to handle the input type="tel" like before the release? For mobiles it's very important to have numeric keyboard.

Thanks !

When inputing into the field, the onChange prop function is invoked twice per change, which seems to be a result of this line

https://github.com/s-yadav/react-number-format/blob/master/src/number_format.js#L226

Hey,
great library. Works good for me just one little thing:
I dynamically disable the input field and it seems like the component is not applying the property although it's updating. Is it possible to get that working somehow?

<NumberFormat disabled={this.props.submitting} id='card-number' displayType={'tel'} format='#### #### #### ####'/>

"submitting" is a boolean property that gets updated when fetching.

When on mobile device with thousand separator set as comma, if I enter '12345' in that order the sequence becomes '12,354'. Should be '12,345'

When having an input with custom decimal separator such as comma and decimalPrecision, the decimals are returned undefined or inaccurate.

Example

<NumberFormat thousandSeparator={'.'} decimalSeparator={','} decimalPrecision={2} />
would return

This is mainly because the .toFixed js function doesnt work with comma as a decimal separator.

Not sure if this is expected/wanted, but I find it complicates my use case.

If you insert just '.' to the NumberFormat, you get as a response value '.'. Trying to convert to a number with Number() yields NaN.

I would expect to get back 0 in this case. Makes handling the response simpler as we can always expect a number.

Hi s-yadav,
first of all: Thanks for sharing this npm module with the community!

I found a weird behavior, maybe I misuse the module? Added a Codepen below.
<NumberFormat value={1255.123} decimalPrecision={2} thousandSeparator={'.'} decimalSeparator={','} />

rendered ouput "1.255.123,00"
exptected output: "1255,12"

http://codepen.io/achimkoellner/pen/YZemJZ

In locale FR_CH we use ' as a thousands separator:

1500250 -> 1'500'250

thousandSeperator -> thousandSeparator

I created a pen here:
http://codepen.io/anon/pen/zwRWKg
basically this setting:

getInitialState : function(){ return {inout:3000.33}; },
<NumberFormat value={this.state.inout} thousandSeparator={'.'} suffix={' €'} decimalSeparator={','} decimalPrecision={true} />

does produce:
300.033,00 €
but should be:
3.000,33 €

When i get the value argument, its a string, not a float. I used this:
<NumberFormat suffix=" &euro;" decimalSeparator="," thousandSeparator="." className="form-control" value={2500.55} onChange={this.onNumberChange} />

i think the value should be 2500.55 but it returns this string: "2500,55"

using an american format returns he same issue:
<NumberFormat prefix="$" className="form-control" value={2500.55} onChange={this.onNumberChange} /> ... returns string "2500.55"

Hi there, do you intend to release this under MIT License?

I'm using version 2.0.0-alpha2. Here is my code where decimalPrecision is set to true :

<NumberFormat thousandSeparator value={data.price} decimalPrecision={true} displayType={'text'} prefix={'RM '} />

It will show only 1 decimal place:

Isn't it should show 2 decimal places because default for true is 2 decimal places? That's what I get from the documentation.

Changing to decimalPrecision={2} will solve the problem.

Hi,
How do I get the original non-formatted value on the onChange callback?, because I'm getting the $231,231,454,345 value in event.target.value

Decimal separator is only required when formatting a normal number. When a user provides a format prop the expect it to format separately. In that case, decimal separator shouldn't be allowed.

Whenever I have decimalPrecision={false} as per doc, it still allows me to input decimals in, and in fact it allows to put huge number of them.

It looks like a bug, Is this intended?

Cheers,
Cezar.

Hello,

In some languages, like French, the (non-breaking) space character is used as a digit groups delimiter: 12345 will be displayed as 12 345. This should be supported by this library.

While typing if decimal precision is defined, it rounds off when user enters extra character then precision.
Ex: with four precision

4111.11118 => 4111.1112
4111.11128 => 4111.1113

Rounding should only happen to values passed through props

Hello,

It seems to me that the only input prop that is support on NumberFormat is the value prop. I think it would be better to support any input prop (placeholder, onFocus, etc.) by extending the input props instead of replacing it — as it is done by react-text-mask for instance.