Skip to content

React component for entering and validating international telephone numbers

Notifications You must be signed in to change notification settings

tyfoo/react-telephone-input

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

86 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Reactjs Component for International Telephone Input

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

// Use declaratively within another react components render method
var ReactTelInput = require('react-telephone-input');
<MyAwesomeReactComponent>
  <ReactTelInput defaultCountry="in"/>
</MyAwesomeReactComponent>

// or render standalone
var ReactTelInput = require('react-telephone-input');
React.render(<ReactTelInput defaultCountry="in"/>, document.getElementById('my-container'));

How to use it

  • If you install it from npm install, you can just do var 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
<ReactTelephoneInput defaultCountry='in' flagsImagePath='/path/to/images/flags.png'>

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:8000`

About

React component for entering and validating international telephone numbers

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 94.5%
  • CSS 5.4%
  • HTML 0.1%