Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jorisre/react-telephone
☎️ Tiniest react phone input component (auto formating included)
https://github.com/jorisre/react-telephone
phone phone-number phonenumber react reactjs
Last synced: 13 days ago
JSON representation
☎️ Tiniest react phone input component (auto formating included)
- Host: GitHub
- URL: https://github.com/jorisre/react-telephone
- Owner: jorisre
- License: mit
- Created: 2022-03-14T17:12:56.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-29T17:50:05.000Z (14 days ago)
- Last Synced: 2024-10-29T19:02:48.273Z (14 days ago)
- Topics: phone, phone-number, phonenumber, react, reactjs
- Language: TypeScript
- Homepage: https://react-telephone.joris.re/
- Size: 3.35 MB
- Stars: 43
- Watchers: 0
- Forks: 6
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
☎️ 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](https://www.itu.int/rec/T-REC-E.164-201011-I/en)**
- 🎨 **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](https://github.com/jorisre/react-telephone/blob/main/examples/src/components/samples/Basic.tsx)
- [Tailwind Css](https://github.com/jorisre/react-telephone/blob/main/examples/src/components/samples/Tailwind.tsx)
- [Styled Components](https://github.com/jorisre/react-telephone/blob/main/examples/src/components/samples/StyledComponents.tsx)
- [Css Modules](https://github.com/jorisre/react-telephone/blob/main/examples/src/components/samples/CssModules.tsx)
- [Inline Styles](https://github.com/jorisre/react-telephone/blob/main/examples/src/components/samples/InlineStyles.tsx)
- [React Hook Form](https://github.com/jorisre/react-telephone/blob/main/examples/src/components/samples/ReactHookForm.tsx)
## 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](https://en.wikipedia.org/wiki/ISO_3166-2) _(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](https://allcontributors.org/docs/en/emoji-key)):
