2.13.0

* add unformatted value to onChange callback

Author: bl00mber

README.md

@@ -233,6 +233,8 @@ import 'react-phone-input-2/lib/style.css'
  </tr>
 </table>
 
+onChange(value, country, e, formattedValue)
+
 Country data object not returns from onKeyDown event
 
 <table>

package.json

@@ -1,6 +1,6 @@
 {
  "name": "react-phone-input-2",
- "version": "2.12.1",
+ "version": "2.13.0",
  "description": "A react component to format phone numbers",
  "main": "lib/lib.js",
  "typings": "index.d.ts",

src/index.js

@@ -555,7 +555,7 @@ class PhoneInput extends React.Component {
  this.numberInputRef.setSelectionRange(caretPosition, caretPosition);
  }
 
- if (onChange) onChange(this.state.formattedNumber.replace(/[^0-9]+/g,''), this.getCountryData(), e);
+ if (onChange) onChange(formattedNumber.replace(/[^0-9]+/g,''), this.getCountryData(), e, formattedNumber);
  });
  }
 
@@ -585,7 +585,7 @@ class PhoneInput extends React.Component {
  formattedNumber
  }, () => {
  this.cursorToEnd();
- if (this.props.onChange) this.props.onChange(formattedNumber.replace(/[^0-9]+/g,''), this.getCountryData(), e);
+ if (this.props.onChange) this.props.onChange(formattedNumber.replace(/[^0-9]+/g,''), this.getCountryData(), e, formattedValue);
  });
  }
 

test/ReactPhoneInput.test.js

@@ -73,7 +73,7 @@ describe('<PhoneInput /> event handlers', () => {
  />)
 
  fireEvent.change(phoneInput.querySelector('.form-control'), {target: {value: '12345'}})
- expect(mockFn).toHaveBeenCalledWith('12345', {name: 'United States', dialCode: '1', 'format': '+. (...) ...-....', countryCode: 'us'}, expect.any(Object))
+ expect(mockFn).toHaveBeenCalledWith('12345', {name: 'United States', dialCode: '1', 'format': '+. (...) ...-....', countryCode: 'us'}, expect.any(Object), '+1 (234) 5')
  })
 })
 

test/dev:js/demo.js

@@ -184,7 +184,8 @@ class Demo extends React.Component {
  <p>State manipulations</p>
  <PhoneInput
  value={this.state.value}
- onChange={(value, country, e) => {console.log(value, country, e); this.setState({ value })}}
+ onChange={(value, country, e, formattedValue) => {console.log(value, country, e, formattedValue);
+ this.setState({ value })}}
  enableAreaCodes
  defaultErrorMessage='Invalid value'
  isValid={(value, country) => {