VBPhoneNumber

A React component for masking and formatting phone number.

Live Demo

Install

$3

VBPhoneNumber can be used on the server, or bundled for the client using an npm-compatible packaging system such as Browserify or webpack.

``
npm install vb-react-phone-number --save
`

$3

The browser bundle exposes a global VBPhoneNumber variable and expects to find a global React (>= 0.14.0) variable to work with.

* vb-react-phone-number.js (development version)
* vb-react-phone-number.min.js (compressed production version)

Usage

`javascript
var React = require('react')
var VBPhoneNumber = require('vb-react-phone-number')

var PhoneNumber = React.createClass({
onChange = (value) => {};

onInvalidChange = (value) => {};

onValidChange = (value) => {};

onFocus = (event) => {};

onBlur = (event) => {};

render () {
const { value } = this.props;
return (
value={value}
onChange={this.onChange}
onInvalidChange={this.onInvalidChange}
onValidChange={this.onValidChange}
onFocus={this.onFocus}
onBlur={this.onBlur}
onlyCountryCodes={['UA', 'US', 'RU', 'DE']}
favoriteCountryCodes={['US', 'UA', 'RU']}
errorMessage="Phone number is not valid" />
)
}
})
`

Props


`javascript
{
favoriteCountryCodes: PropTypes.arrayOf(PropTypes.string),
onlyCountryCodes: PropTypes.arrayOf(PropTypes.string),
value: PropTypes.string,
errorMessage: PropTypes.string,
onChange: PropTypes.func,
onValidChange: PropTypes.func,
onInvalidChange: PropTypes.func,
onFocus: PropTypes.func,
onBlur: PropTypes.func,
selectComponent: PropTypes.func
}
``

$3

MIT Licensed