Skip to content

jorisre/react-telephone

Repository files navigation

react-telephone - Demo

All Contributors


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

Examples (Demo)

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

Joris
Joris

💻 📖 🤔 👀
Michaël Rézac
Michaël Rézac

🤔 💻
Varshneya Rao
Varshneya Rao

💻