react-phone-hooks

react-phone-hooks

This comprehensive toolkit features custom hooks and utility functions tailored for phone number formatting, parsing, and validation. It supports international standards, making it suitable for phone number processing applications across different countries and regions.

Usage

This library can be used to build a phone number input component with a country selector for React applications. As well as to parse the phone metadata, validate phone numbers, format raw phone numbers into a more readable format and the opposite. You can use the development to test and develop your own components.

import {getFormattedNumber, getMetadata, parsePhoneNumber, useMask} from "react-phone-hooks";

getFormattedNumber("440201111111"); // [phone]
getMetadata("440201111111"); // ["gb", "United Kingdom", "44", "+44 (..) ... ....."]
parsePhoneNumber("[phone]"); // {countryCode: 44, areaCode: "02", phoneNumber: "01111111", isoCode: "gb"}

const PhoneInput = (props) => {
    return <input {...useMask("+1 (...) ... ....")} {...props}/>
}

Contribute

Any contribution is welcome. Don't hesitate to open an issue or discussion if you have questions about your project's usage and integration. For ideas or suggestions, please open a pull request. Your name will shine on our contributors' list. Be proud of what you build!

License

Copyright (C) 2023 Artyom Vancyan. MIT