New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-number-format
Advanced tools
react-number-format - npm Package Compare versions
Comparing version 2.0.0-beta1 to 2.0.0
| /*! | ||
| * react-number-format - 2.0.0-beta1 | ||
| * react-number-format - 2.0.0 | ||
| * Author : Sudhanshu Yadav | ||
@@ -89,18 +89,4 @@ * Copyright (c) 2016,2017 to Sudhanshu Yadav - ignitersworld.com , released under the MIT license. | ||
| function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** | ||
| * 1. Validate thousand separators and decimals throw error | ||
| * 2. Thousand separator just have value true or any other string | ||
| * 3. Decimal separator should be defined only as string | ||
| * 4. Decimal precision should be only defined as number | ||
| * 5. If user don't want floating numbers set decimalPrecision to 0 | ||
| * 6. User can pass value as floating point numbers or string, if user passes string decimal separator in string should match to provided decimalSeparator | ||
| * 7. Add formattedValue, numeric value, value with string in event object and not as parameters so that getting values should look consistent | ||
| * 8. dont use parseFloat that will not able to parse 2^23 | ||
| * 9. Always have decimal precision | ||
| * 10. isAllowed props to validate input and block if returns false | ||
| * 11. Round to precision for passed value | ||
| * 12. It should always move cursor to type area ignoring prefix and suffix | ||
| */ | ||
| function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
| function noop() {}; | ||
@@ -107,0 +93,0 @@ |
| /*! | ||
| * react-number-format - 2.0.0-beta1 | ||
| * react-number-format - 2.0.0 | ||
| * Author : Sudhanshu Yadav | ||
@@ -4,0 +4,0 @@ * Copyright (c) 2016,2017 to Sudhanshu Yadav - ignitersworld.com , released under the MIT license. |
@@ -21,18 +21,4 @@ 'use strict'; | ||
| function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** | ||
| * 1. Validate thousand separators and decimals throw error | ||
| * 2. Thousand separator just have value true or any other string | ||
| * 3. Decimal separator should be defined only as string | ||
| * 4. Decimal precision should be only defined as number | ||
| * 5. If user don't want floating numbers set decimalPrecision to 0 | ||
| * 6. User can pass value as floating point numbers or string, if user passes string decimal separator in string should match to provided decimalSeparator | ||
| * 7. Add formattedValue, numeric value, value with string in event object and not as parameters so that getting values should look consistent | ||
| * 8. dont use parseFloat that will not able to parse 2^23 | ||
| * 9. Always have decimal precision | ||
| * 10. isAllowed props to validate input and block if returns false | ||
| * 11. Round to precision for passed value | ||
| * 12. It should always move cursor to type area ignoring prefix and suffix | ||
| */ | ||
| function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
| function noop() {}; | ||
@@ -39,0 +25,0 @@ |
| { | ||
| "name": "react-number-format", | ||
| "description": "React component to format number in an input or as a text.", | ||
| "version": "2.0.0-beta1", | ||
| "version": "2.0.0", | ||
| "main": "lib/number_format.js", | ||
@@ -6,0 +6,0 @@ "author": "Sudhanshu Yadav", |
@@ -12,2 +12,4 @@ # react-number-format | ||
| ### Install | ||
| [](https://www.npmjs.com/package/react-number-format) | ||
| Through npm | ||
@@ -27,3 +29,3 @@ `npm install react-number-format --save` | ||
| | suffix | String (ex : /-) | none | Add a prefix after the number | | ||
| | value | Number | null | Value to number format | | ||
| | value | Number or String | null | Value to the number format. If passed as string it should have same decimal separator as the decimalSeparator props| | ||
| | displayType | String: text / input | input | If input it renders a input element where formatting happens as you input characters. If text it renders it as a normal text in a span formatting the given value | | ||
@@ -49,2 +51,11 @@ | type | One of ['text', 'tel'] | text | Input type attribute | ||
| ### Notes and quirks | ||
| 1. Value can be passed as string or number, but if it is passed as string you should maintain the same decimal separator on the string what you provided as decimalSeparator prop. | ||
| 2. Value as prop will be rounded to given precision if format option is not provided. | ||
| 3. If you want to block floating number set decimalPrecision to 0. | ||
| 4. Use type as tel when you are providing format prop. This will change the mobile keyboard layout to have only numbers. In other case use type as text, so user can type decimal separator. | ||
| ### Examples | ||
@@ -73,5 +84,6 @@ #### Prefix and thousand separator : Format currency as text | ||
| ```jsx | ||
| <NumberFormat value={this.state.profit} thousandSeparator={true} prefix={'$'} onChange={(e, value) => { | ||
| const formattedValue = e.target.value; // $222,3 | ||
| //value will be non formatted value ie, 2223 | ||
| <NumberFormat value={this.state.profit} thousandSeparator={true} prefix={'$'} onChange={(e, values) => { | ||
| const {formattedValue, value} = values; | ||
| // formattedValue = $222,3 | ||
| //value ie, 2223 | ||
| this.setState({profit: value}) | ||
@@ -122,3 +134,3 @@ }}/> | ||
| ``` | ||
|  | ||
|  | ||
@@ -134,2 +146,3 @@ ### Custom Inputs | ||
| ``` | ||
|  | ||
@@ -147,18 +160,13 @@ **Passing custom input props** | ||
| ### Major Updates | ||
| ### v1.2.0 | ||
| - Support negative numbers | ||
| ### v2.0.0 | ||
| - Added isAllowed prop to validate custom input and block based on it. | ||
| - onChange api been changed. Now it receives [values object](#values-object) as second parameter. | ||
| - decimalSeparator no longer support boolean values | ||
| - thousandSeparator accepts only true as boolean (which defaults to ,) or thousandSeparator string | ||
| - decimalSeparator only accepts number Now | ||
| - Value can be passed as string or number but if it is passed as string you should maintain the same decimal separator on the string what you provided as decimalSeparator prop. | ||
| - Added back the type prop for the input type attribute (Only text or tel is supported) | ||
| - Lot of bugs and stability fixes ([See release notes](https://github.com/s-yadav/react-number-format/releases)) | ||
| ### v1.1.0 | ||
| - Support custom input | ||
| - Support custom decimal / thousandSeparator | ||
| - Support providing decimal precision | ||
| - Bug fixes ([See release notes](https://github.com/s-yadav/react-number-format/releases)) | ||
| ### v1.0.0 | ||
| - Support decimals | ||
| - Support changing thousandSeparator to ',' | ||
| - Updated complete code to ES6 | ||
| - Added propTypes validation | ||
| - Fixed #1, #7, #8, #9 | ||
| ### Development | ||
@@ -165,0 +173,0 @@ - Download the zip |
@@ -1,15 +0,1 @@ | ||
| /** | ||
| * 1. Validate thousand separators and decimals throw error | ||
| * 2. Thousand separator just have value true or any other string | ||
| * 3. Decimal separator should be defined only as string | ||
| * 4. Decimal precision should be only defined as number | ||
| * 5. If user don't want floating numbers set decimalPrecision to 0 | ||
| * 6. User can pass value as floating point numbers or string, if user passes string decimal separator in string should match to provided decimalSeparator | ||
| * 7. Add formattedValue, numeric value, value with string in event object and not as parameters so that getting values should look consistent | ||
| * 8. dont use parseFloat that will not able to parse 2^23 | ||
| * 9. Always have decimal precision | ||
| * 10. isAllowed props to validate input and block if returns false | ||
| * 11. Round to precision for passed value | ||
| * 12. It should always move cursor to type area ignoring prefix and suffix | ||
| */ | ||
| import PropTypes from 'prop-types'; | ||
@@ -16,0 +2,0 @@ import React from 'react'; |
Fixed alerts
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Number of low quality alerts
- decreased by-33.33%
2
- Number of lines in readme file
- increased by4.76%
176
Worsened metrics
- Total package byte prevSize
- decreased by-9.29%
140430
- Lines of code
- decreased by-1.46%
2706
No dependency changes