react-number-format - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

dist/react-number-format.js

@@ -0,1 +1,6 @@
+/*!
+ * react-number-format - 0.1.1
+ * Author : Sudhanshu Yadav
+ * Copyright (c) 2016 to Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
+ */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -6,6 +11,6 @@ if(typeof exports === 'object' && typeof module === 'object')
 		define(["React"], factory);
-	else {
-		var a = typeof exports === 'object' ? factory(require("React")) : factory(root["React"]);
-		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
-	}
+	else if(typeof exports === 'object')
+		exports["NumberFormat"] = factory(require("React"));
+	else
+		root["NumberFormat"] = factory(root["React"]);
 })(this, function(__WEBPACK_EXTERNAL_MODULE_2__) {
@@ -71,5 +76,4 @@ return /******/ (function(modules) { // webpackBootstrap
 
-	var FormatNumberInput = React.createClass({
-	  displayName: 'FormatNumberInput',
-
+	var NumberFormat = React.createClass({
+	  displayName: 'NumberFormat',
 	  getInitialState: function getInitialState() {
@@ -238,3 +242,3 @@ return {
 
-	module.exports = FormatNumberInput;
+	module.exports = NumberFormat;
 
@@ -241,0 +245,0 @@ /***/ },

dist/react-number-format.min.js

@@ -1,1 +0,6 @@
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("React"));else if("function"==typeof define&&define.amd)define(["React"],e);else{var r=e("object"==typeof exports?require("React"):t.React);for(var n in r)("object"==typeof exports?exports:t)[n]=r[n]}}(this,function(t){return function(t){function e(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return t[n].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var r={};return e.m=t,e.c=r,e.p="",e(0)}([function(t,e,r){t.exports=r(1)},function(t,e,r){"use strict";var n=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t},o=r(2),a=o.createClass({displayName:"FormatNumberInput",getInitialState:function(){return{value:this.formatInput(this.props.value).formattedValue}},getDefaultProps:function(){return{displayType:"input"}},componentWillReceiveProps:function(t){this.setState({value:this.formatInput(t.value).formattedValue})},shouldComponentUpdate:function(t){return!(t!==this.props&&t.value===this.props.value)},setCaretPosition:function(t){var e=this.refs.input;if(e.value=e.value,null!==e){if(e.createTextRange){var r=e.createTextRange();return r.move("character",t),r.select(),!0}return e.selectionStart||0===e.selectionStart?(e.focus(),e.setSelectionRange(t,t),!0):(e.focus(),!1)}},formatWithPattern:function(t){var e=this.props,r=e.format,n=e.mask;if(!r)return t;for(var o=r.split("#").length-1,a=0,i=r,s=0,u=t.length;u>s;s++)o>s&&(a=i.indexOf("#"),i=i.replace("#",t[s]));var p=i.lastIndexOf("#");return n?i.replace(/#/g,n):i.substring(0,a+1)+(-1!==p?i.substring(p+1,i.length):"")},formatInput:function(t){var e=this.props,r=e.prefix,n=e.thousandSeperator,o=e.suffix,a=(e.mask,e.format);if(!t||!(t+"").match(/\d/g))return{value:"",formattedValue:""};var i=(t+"").match(/\d/g).join(""),s=i;return a?"string"==typeof a?s=this.formatWithPattern(s):"function"==typeof a&&(s=a(s)):(n&&(s=s.replace(/(\d)(?=(\d{3})+(?!\d))/g,"$1,")),r&&(s=r+s),o&&(s+=o)),{value:s.match(/\d/g).join(""),formattedValue:s}},getCursorPosition:function(t,e,r){for(var n=0,o=0;r>o;o++)if(t[o].match(/\d/)||t[o]===e[n]){for(;t[o]!==e[n]&&n<e.length;)n++;n++}for(;n>0&&e[n]&&!e[n-1].match(/\d/);)n--;return n},onChangeHandler:function(t,e){var r=this,n=t.target.value,o=this.formatInput(n),a=o.formattedValue,i=o.value,s=this.refs.input.selectionStart;return this.setState({value:a},function(){s=r.getCursorPosition(n,a,s),r.setCaretPosition(s),e&&e(t,i)}),i},onChange:function(t){this.onChangeHandler(t,this.props.onChange)},onInput:function(t){this.onChangeHandler(t,this.props.onInput)},render:function(){var t=this.props;return"text"===t.displayType?o.createElement("span",this.props,this.state.value):o.createElement("input",n({},this.props,{type:"tel",value:this.state.value,ref:"input",onInput:this.onChange,onChange:this.onChange}))}});t.exports=a},function(e,r){e.exports=t}])});
+/*!
+ * react-number-format - 0.1.1
+ * Author : Sudhanshu Yadav
+ * Copyright (c) 2016 to Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
+ */
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("React")):"function"==typeof define&&define.amd?define(["React"],e):"object"==typeof exports?exports.NumberFormat=e(require("React")):t.NumberFormat=e(t.React)}(this,function(t){return function(t){function e(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return t[n].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var r={};return e.m=t,e.c=r,e.p="",e(0)}([function(t,e,r){t.exports=r(1)},function(t,e,r){"use strict";var n=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t},o=r(2),a=o.createClass({displayName:"NumberFormat",getInitialState:function(){return{value:this.formatInput(this.props.value).formattedValue}},getDefaultProps:function(){return{displayType:"input"}},componentWillReceiveProps:function(t){this.setState({value:this.formatInput(t.value).formattedValue})},shouldComponentUpdate:function(t){return!(t!==this.props&&t.value===this.props.value)},setCaretPosition:function(t){var e=this.refs.input;if(e.value=e.value,null!==e){if(e.createTextRange){var r=e.createTextRange();return r.move("character",t),r.select(),!0}return e.selectionStart||0===e.selectionStart?(e.focus(),e.setSelectionRange(t,t),!0):(e.focus(),!1)}},formatWithPattern:function(t){var e=this.props,r=e.format,n=e.mask;if(!r)return t;for(var o=r.split("#").length-1,a=0,i=r,s=0,u=t.length;u>s;s++)o>s&&(a=i.indexOf("#"),i=i.replace("#",t[s]));var p=i.lastIndexOf("#");return n?i.replace(/#/g,n):i.substring(0,a+1)+(-1!==p?i.substring(p+1,i.length):"")},formatInput:function(t){var e=this.props,r=e.prefix,n=e.thousandSeperator,o=e.suffix,a=(e.mask,e.format);if(!t||!(t+"").match(/\d/g))return{value:"",formattedValue:""};var i=(t+"").match(/\d/g).join(""),s=i;return a?"string"==typeof a?s=this.formatWithPattern(s):"function"==typeof a&&(s=a(s)):(n&&(s=s.replace(/(\d)(?=(\d{3})+(?!\d))/g,"$1,")),r&&(s=r+s),o&&(s+=o)),{value:s.match(/\d/g).join(""),formattedValue:s}},getCursorPosition:function(t,e,r){for(var n=0,o=0;r>o;o++)if(t[o].match(/\d/)||t[o]===e[n]){for(;t[o]!==e[n]&&n<e.length;)n++;n++}for(;n>0&&e[n]&&!e[n-1].match(/\d/);)n--;return n},onChangeHandler:function(t,e){var r=this,n=t.target.value,o=this.formatInput(n),a=o.formattedValue,i=o.value,s=this.refs.input.selectionStart;return this.setState({value:a},function(){s=r.getCursorPosition(n,a,s),r.setCaretPosition(s),e&&e(t,i)}),i},onChange:function(t){this.onChangeHandler(t,this.props.onChange)},onInput:function(t){this.onChangeHandler(t,this.props.onInput)},render:function(){var t=this.props;return"text"===t.displayType?o.createElement("span",this.props,this.state.value):o.createElement("input",n({},this.props,{type:"tel",value:this.state.value,ref:"input",onInput:this.onChange,onChange:this.onChange}))}});t.exports=a},function(e,r){e.exports=t}])});

example/src/index.js

 const React = require('react');
 const ReactDOM = require('react-dom');
-const FormatNumberInput = require('../../src/number_format');
+const NumberFormat = require('../../src/number_format');
 
@@ -26,3 +26,3 @@ const App = React.createClass({
           </h3>
-          <FormatNumberInput value={2456981} displayType={'text'} thousandSeperator={true} prefix={'$'} />
+          <NumberFormat value={2456981} displayType={'text'} thousandSeperator={true} prefix={'$'} />
         </div>
@@ -34,3 +34,3 @@
           </h3>
-          <FormatNumberInput value={4111111111111111} displayType={'text'} format="#### #### #### ####" />
+          <NumberFormat value={4111111111111111} displayType={'text'} format="#### #### #### ####" />
         </div>
@@ -42,3 +42,3 @@
           </h3>
-          <FormatNumberInput thousandSeperator={true} prefix={'$'} />
+          <NumberFormat thousandSeperator={true} prefix={'$'} />
         </div>
@@ -50,3 +50,3 @@
           </h3>
-          <FormatNumberInput format="#### #### #### ####" />
+          <NumberFormat format="#### #### #### ####" />
         </div>
@@ -58,3 +58,3 @@
           </h3>
-          <FormatNumberInput format="#### #### #### ####" mask="_"/>
+          <NumberFormat format="#### #### #### ####" mask="_"/>
         </div>
@@ -66,3 +66,3 @@
           </h3>
-          <FormatNumberInput format={this.formatExpiryChange}/>
+          <NumberFormat format={this.formatExpiryChange}/>
         </div>
@@ -69,0 +69,0 @@ </div>

lib/number_format.js

@@ -7,5 +7,4 @@ 'use strict';
 
-var FormatNumberInput = React.createClass({
-  displayName: 'FormatNumberInput',
-
+var NumberFormat = React.createClass({
+  displayName: 'NumberFormat',
   getInitialState: function getInitialState() {
@@ -174,2 +173,2 @@ return {
 
-module.exports = FormatNumberInput;
+module.exports = NumberFormat;

package.json

 {
   "name": "react-number-format",
   "description": "React component to format number in an input or as a text.",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "main": "lib/number_format.js",
@@ -6,0 +6,0 @@ "engines": {

README.md

 # react-number-format
-React component to format number as a text or inside a input 
+React component to format number in an input or as a text
+
+### Features
+1. Allow prefix, suffix and thousand seperator. 
+2. Allow format pattern.
+3. Allow masking.
+4. Allow custom formatting handler.
+5. Allow formatting a input or a simple text
+
+### Install
+Through npm 
+`npm install react-number-format --save`
+
+Or get compiled development and production version from ./dist
+
+### Props
+| Props        | Options           | Default  | Description |
+| ------------- |-------------| -----| -------- |
+| thousandSeperator | Boolean: true/false | false | Add thousand seperators on number |
+| prefix      | String (ex : $)     |   none | Add a prefix before the number |
+| suffix | String (ex : /-)      |    none | Add a prefix after the number |
+| value | Number | null | Give initial value to number format |
+| 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 |
+| format | String : Hash based ex (#### #### #### ####) <br/> Or Function| none | If format given as hash string allow number input inplace of hash. If format given as function, component calls the function with unformatted number and expects formatted number.
+| mask | String (ex : _) | none | If mask defined, component will show non entered placed with masked value.  
+
+### Examples
+#### Prefix and thousand seperator : Format currency as text
+```jsx
+var NumberFormat = require('react-number-format');
+
+<NumberFormat value={2456981} displayType={'text'} thousandSeperator={true} prefix={'$'} />
+```
+Output : $2,456,981
+
+#### Format with pattern : Format credit card as text
+```jsx
+<NumberFormat value={4111111111111111} displayType={'text'} format="#### #### #### ####" />
+```
+Output : 4111 1111 1111 1111
+
+#### Prefix and thousand seperator : Format currency in input
+```jsx
+<NumberFormat thousandSeperator={true} prefix={'$'} />
+```
+![Screencast example](https://i.imgur.com/d0P2Db1.gif)
+
+#### Format with pattern : Format credit card in an input
+```jsx
+<NumberFormat format="#### #### #### ####" />
+```
+![Screencast example](https://i.imgur.com/KEiYp4o.gif)
+
+#### Format with mask : Format credit card in an input
+```jsx
+<NumberFormat format="#### #### #### ####" mask="_"/>
+```
+![Screencast example](https://i.imgur.com/qvmydpH.gif)
+
+#### Custom format method  : Format credit card expiry time
+```jsx
+  function formatExpiryChange(val){
+    if(val && Number(val[0]) > 1){
+      val = '0'+val;
+    }
+    if(val && val.length >1 && Number(val[0]+val[1]) > 12){
+      val = '12'+val.substring(2,val.length);
+    }
+    val = val.substring(0,2)+ (val.length > 2 ? '/'+val.substring(2,4) : '');
+    return val;
+  }
+
+<NumberFormat format={formatExpiryChange}/>
+```
+![Screencast example](https://i.imgur.com/9wwdyFF.gif)
+
+### Development
+- Download the zip
+- `npm install`
+- `npm start` to run example server
+- `npm run test` to test changes
+- `npm run bundle` to bundle files
+
+#### Testing
+Test cases are written in jasmine and run by karma
+Test file : /test/test_input.js
+To run test : `npm run test`

src/number_format.js

 const React = require('react');
 
-const FormatNumberInput =  React.createClass({
+const NumberFormat =  React.createClass({
+  displayName : 'NumberFormat',
   getInitialState : function(){
@@ -152,2 +153,2 @@ return {
 
-module.exports = FormatNumberInput;
+module.exports = NumberFormat;

webpack.bundle.config.js

 const webpack = require('webpack');
+const PACKAGE = require('./package.json');
+const fullYear = new Date().getFullYear();
+const banner = PACKAGE.name + ' - ' + PACKAGE.version + '\n' +
+  'Author : '+PACKAGE.author+'\n'+
+  'Copyright (c) '+ (fullYear!== 2016 ? '2016,' : '') + fullYear + ' to ' + PACKAGE.author + ' - ignitersworld.com , released under the '+PACKAGE.license+' license.'
+  /* +PACKAGE.homepage */;
 
@@ -17,3 +23,4 @@ module.exports = {
     filename: '[name].js',
-    libraryTarget : 'umd'
+    libraryTarget : 'umd',
+    library : 'NumberFormat'
   },
@@ -36,3 +43,4 @@ resolveLoader: {
           minimize: true
-    })
+    }),
+    new webpack.BannerPlugin(banner)
   ],
@@ -39,0 +47,0 @@ resolve: {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59734

increased by6.78%

Lines of code

1156

increased by1.67%

Number of lines in readme file

89

increased by2866.67%

No dependency changes