Skip to content

React hooks and utility functions for parsing and validation phone numbers.

License

Notifications You must be signed in to change notification settings

typesnippet/react-phone-hooks

Folders and files

NameName
Last commit message
Last commit date

Latest commit

8317f0d · Mar 30, 2025
Dec 12, 2023
Feb 3, 2025
Mar 30, 2025
Jul 20, 2024
Mar 30, 2025
Jul 4, 2024
Nov 30, 2023
Dec 8, 2023
Nov 30, 2023
May 2, 2024
Dec 8, 2023
Feb 3, 2025
Nov 13, 2024
Nov 13, 2024

Repository files navigation

react-phone-hooks

npm React types License Tests

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"); // +44 (02) 011 11111
getMetadata("440201111111"); // ["gb", "United Kingdom", "44", "+44 (..) ... ....."]
parsePhoneNumber("+44 (02) 011 11111"); // {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