VBPhoneNumber

A React component for masking and formatting phone number.

Live Demo

Install

npm

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

Browser bundle

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

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 (
        <VBPhoneNumber {...custom}
          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

{
    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
}

selectComponent: Custom React Component for customization select of regions

MIT Licensed