☎️ react-telephone
Tiniest react input phone component (auto formating included)
Demo · Documentation · Twitter Created by Joris
Features
- 🌐 Follows the E.164 : The international public telecommunication numbering plan
- 🎨 Easily Customizable
- 🪶 Lightweight - less than 6kb
- 📞 Native - it's just a HMTL input
- 🔌 easily integration - it works without additional configuration (remix, react-hook-form)
- [ ] Controlled mode: coming soon
- [ ] Custom render for
Phone.CountryandPhone.Number: coming soon
Examples (Demo)
Installation
yarn add react-telephoneor
npm i react-telephoneUsage
import { Phone } from 'react-telephone';
export default function MyComponent() {
return (
<Phone>
<Phone.Country />
<Phone.Number />
</Phone>
);
}Props
| Prop | Description | Default | Value |
|---|---|---|---|
defaultCountry |
Default country displayed for the country selector | First country (Afghanistan) | Country ISO2 code (fr, us) |
Utils
| Name | Description |
|---|---|
countries |
List of all countries. |
getCountryByIso |
Returns the country object for a given ISO code. |
applyMask |
Apply the mask to a given phone number. |
splitPhoneNumber |
Split a phone number into country code and number. |
replaceDialCode |
Replace the dial code of a phone number. |
Contributors
Thanks goes to these wonderful people (emoji key):
 Joris 💻 📖 🤔 👀 |
 Michaël Rézac 🤔 💻 |
 Varshneya Rao 💻 |