react-telephone-input-reverse

Reactjs Component for International Telephone Input
===================================================

IMP: From 3.*, the styles won't be included by default. Can use require('react-telephone-input/lib/withStyles') to get the styles.

Inspired from the awesome jquery plugin for International Telephone Input.

This one is written as a reactjs component.

Live Demo here - http://unstack.in/react-telephone-input/

!How it looks

``js
function handleInputChange(telNumber, selectedCountry) {
console.log('input changed. number: ', telNumber, 'selected country: ', selectedCountry);
}

// Use declaratively within another react components render method
var ReactTelInput = require('react-telephone-input');
// var ReactTelInput = require('react-telephone-input/lib/withStyles'), if you need the styles


defaultCountry="in"
flagsImagePath='/path/to/images/flags.png'
onChange={handleInputChange}
onBlur={handleInputBlur}
/>


// or render standalone
var ReactTelInput = require('react-telephone-input');
React.render( defaultCountry="in"
flagsImagePath='/path/to/images/flags.png'
onChange={handleInputChange}/>
onBlur={handleInputBlur}
document.getElementById('my-container'));
`

The component accepts other props to customize it -

#### value and initialValue
Both the props have the same purpose - for setting the initial value of the input programatically.

#### initialValue
See value above.

#### autoFormat
true by default. Setting it to false will turn off all auto formatting.

#### defaultCountry
The component selects the country code of a country by default. You can change it by passing the iso2 name of a country. E.g. for United States, set defaultCountry to 'us'.

#### onlyCountries
If you don't want all countries to be shown in the dropdown list, you can pass an array of country iso2 names to be shown in the dropdown list.

#### preferredCountries
Preferred countries show up in the top of the list. This prop also accepts an array of country iso2 names.

E.g.
`
preferredCountries={['in', 'us', 'uk']}
/>
`
#### classNames
You can send in additional classes to be applied to the top container div of the component.

#### onChange
Function, which is called whenever there is a change of value in the input box.

#### onEnterKeyPress
Function, which is called when user presses the 'enter' key when the input box is in focus.

#### onBlur
Function, which is called when the focus goes away from the input box.

#### onFocus
Function, which is called when the input box gets the focus.

#### disabled
Boolean value. When set to true, the input box is disabled and clicking on flag dropdown does nothing.

#### pattern
String. This is passed on to the input field and works like it should for any other input field.

#### inputProps
Object. If you want to set some property on the input element, you can pass in an object with the attribute. E.g.
`javascript
let inputProps={
readOnly: true
}


`




How to use it


- If you install it from npm install, you can just do var ReactTelephoneInput = require('react-telephone-input');
- You will need to copy flags.png from example/src folder to see the flag icons for each country.
- Set the path to the flags image using the prop flagsImagePath
`js
function handleInputChange(telNumber, selectedCountry) {
console.log('input changed. number: ', telNumber, 'selected country: ', selectedCountry);
}

function handleInputBlur(telNumber, selectedCountry) {
console.log('Focus off the ReactTelephoneInput component. Tel number entered is: ', telNumber, ' selected country is: ', selectedCountry);
}

defaultCountry='in'
flagsImagePath='/path/to/images/flags.png'
onChange={handleInputChange}
onBlur={handleInputBlur}
/>
`
The default value for flagsImagePath is 'flags.png'




Features

* Automatically format the number as the user types
* Navigate the country dropdown by typing a country's name, or using up/down keys
* Selecting a country from the dropdown will update the dial code in the input
* Typing a different dial code will automatically update the displayed flag
* Country names in the dropdown also include localised versions in brackets
* Dropdown appears above or below the input depending on available space/scroll position

You can try the app by downloading everything and running the commands given below -

`
$ npm install
$ npm start

go to your browser and type http://localhost:3000
``