V3 Release 🎉

Author: s-yadav

README.md

@@ -16,6 +16,23 @@ Through npm
 
 Or get compiled development and production version from ./dist
 
+### Usage
+ES6
+```js
+import NumberFormat from 'react-number-format';
+```
+
+ES5
+```js
+const NumberFormat = require('react-number-format');
+```
+
+Typescript
+```js
+import * as NumberFormat from 'react-number-format';
+```
+
+
 ### Props
 | Props        | Options           | Default  | Description |
 | ------------- |-------------| -----| -------- |
@@ -118,7 +135,7 @@ Mask can also be a array of string. Each item corresponds to the same index #.
 ```jsx
 <NumberFormat format="##/##" placeholder="MM/YY" mask={['M', 'M', 'Y', 'Y']}/>
 ```
-
+![Screencast example](https://media.giphy.com/media/xT9IgojmLf6x3jX0nS/giphy.gif)
 
 #### Custom format method  : Format credit card expiry time
 ```jsx
@@ -155,6 +172,7 @@ function cardExpiry(val) {
 ```jsx
 <NumberFormat format="+1 (###) ###-####" mask="_"/>
 ```
+![Screencast example](https://media.giphy.com/media/l1J9wJ6ZSONO7cXkI/giphy.gif)
 
 ### Custom Inputs
 You can easily extend your custom input with number format. But custom input should have all input props.
@@ -190,7 +208,7 @@ All custom input props and number input props are passed together.
 - mask can be now array of string in which case mask at specific index will be mapped with the # of the pattern.
 - Value can be passed as string or number, but if it is passed as string it should be either formatted value or if it is a numeric string, you have to set isNumericString props to true.
 - Added support for numbers in prefix / suffix / pattern.
-- Fixed caret position issues.
+- Fixed caret position and formatting issues.
 - Lot of bugs and stability fixes ([See v3 tracker](https://github.com/s-yadav/react-number-format/issues/99))
 
 ### v2.0.0

dist/react-number-format.js

@@ -1,5 +1,5 @@
 /*!
- * react-number-format - 3.0.0-beta3
+ * react-number-format - 3.0.0
  * Author : Sudhanshu Yadav
  * Copyright (c) 2016,2017 to Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
  */
@@ -922,17 +922,24 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }, {
 	    key: 'onFocus',
 	    value: function onFocus(e) {
-	      var el = e.target;
-	      var selectionStart = el.selectionStart,
-	          value = el.value;
+	      var _this2 = this;
 
+	      // Workaround Chrome and Safari bug https://bugs.chromium.org/p/chromium/issues/detail?id=779328
+	      // (onFocus event target selectionStart is always 0 before setTimeout)
+	      e.persist();
+	      setTimeout(function () {
+	        var el = e.target;
+	        var selectionStart = el.selectionStart,
+	            value = el.value;
 
-	      var caretPostion = this.correctCaretPosition(value, selectionStart);
-	      if (caretPostion !== selectionStart) {
-	        this.setPatchedCaretPosition(el, caretPostion, value);
-	      }
 
-	      this.props.onFocus(e);
+	        var caretPosition = _this2.correctCaretPosition(value, selectionStart);
+	        if (caretPosition !== selectionStart) {
+	          _this2.setPatchedCaretPosition(el, caretPosition, value);
+	        }
+
+	        _this2.props.onFocus(e);
+	      });
 	    }
 	  }, {
 	    key: 'render',

dist/react-number-format.min.js

@@ -854,17 +854,24 @@ var NumberFormat = function (_React$Component) {
   }, {
     key: 'onFocus',
     value: function onFocus(e) {
-      var el = e.target;
-      var selectionStart = el.selectionStart,
-          value = el.value;
+      var _this2 = this;
 
+      // Workaround Chrome and Safari bug https://bugs.chromium.org/p/chromium/issues/detail?id=779328
+      // (onFocus event target selectionStart is always 0 before setTimeout)
+      e.persist();
+      setTimeout(function () {
+        var el = e.target;
+        var selectionStart = el.selectionStart,
+            value = el.value;
 
-      var caretPostion = this.correctCaretPosition(value, selectionStart);
-      if (caretPostion !== selectionStart) {
-        this.setPatchedCaretPosition(el, caretPostion, value);
-      }
 
-      this.props.onFocus(e);
+        var caretPosition = _this2.correctCaretPosition(value, selectionStart);
+        if (caretPosition !== selectionStart) {
+          _this2.setPatchedCaretPosition(el, caretPosition, value);
+        }
+
+        _this2.props.onFocus(e);
+      });
     }
   }, {
     key: 'render',

lib/number_format.js

@@ -1,7 +1,7 @@
 {
   "name": "react-number-format",
   "description": "React component to format number in an input or as a text.",
-  "version": "3.0.0-beta3",
+  "version": "3.0.0",
   "main": "lib/number_format.js",
   "author": "Sudhanshu Yadav",
   "license": "MIT",