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/
function handleInputChange(telNumber) {
console.log('input number changed to: ', telNumber);
}
// Use declaratively within another react components render method
var ReactTelInput = require('react-telephone-input');
<MyAwesomeReactComponent>
<ReactTelInput
defaultCountry="in"
flagsImagePath='/path/to/images/flags.png'
onChange={handleInputChange}/>
</MyAwesomeReactComponent>
// or render standalone
var ReactTelInput = require('react-telephone-input');
React.render(<ReactTelInput
defaultCountry="in"
flagsImagePath='/path/to/images/flags.png'
onChange={handleInputChange}/>,
document.getElementById('my-container'));
- If you install it from
npm install, you can just dovar ReactTelephoneInut = 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
function handleInputChange(telNumber) {
console.log('input number changed to: ', telNumber);
}
<ReactTelephoneInput
defaultCountry='in'
flagsImagePath='/path/to/images/flags.png'
onChange={handleInputChange}>
The default value for flagsImagePath is 'flags.png'
- 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:8000`