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.Country and Phone.Number: coming soon

Examples (Demo)

• Basic
• Tailwind Css
• Styled Components
• Css Modules
• Inline Styles
• React Hook Form

Installation

yarn add react-telephone

or

npm i react-telephone

Usage

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):