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)

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

Installation

1yarn add react-telephone

or

1npm i react-telephone

Usage

1import { Phone } from 'react-telephone';
2
3export default function MyComponent() {
4  return (
5    <Phone>
6      <Phone.Country />
7      <Phone.Number />
8    </Phone>
9  );
10}

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 💻