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

$3

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

Installation

``sh
yarn add react-telephone
`

or

`sh
npm i react-telephone
`

Usage

`tsx
import { Phone } from 'react-telephone';

export default function MyComponent() {
return (




);
}
`

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 💻