Skip to content

feat: add formatterPerCountry prop for custom phone number formatting#187

Open
theo-sim-dev wants to merge 1 commit intoviclafouch:masterfrom
theo-sim-dev:feature/custom-formatter
Open

feat: add formatterPerCountry prop for custom phone number formatting#187
theo-sim-dev wants to merge 1 commit intoviclafouch:masterfrom
theo-sim-dev:feature/custom-formatter

Conversation

@theo-sim-dev
Copy link
Copy Markdown

@theo-sim-dev theo-sim-dev commented Jun 2, 2025

Description

This PR addresses #178 by introducing a new prop, formatterPerCountry, enabling custom phone number formatting on a per-country basis. Developers now can bypass using a default formatter from libphonenumber-js for specific countries.

Example

const formatterPerCountry = {
  US: (value: string) => {
    // Format +1 (###) ###-####
    // ...implementation...
    return formattedValue
  }
}

<MuiTelInput formatterPerCountry={formatterPerCountry} />

theo-sim-dev
theo-sim-dev commented Jun 2, 2025
View reviewed changes
Comment thread src/shared/hooks/usePhoneDigits.ts
currentCountry &&
formatterPerCountry[currentCountry]
) {
asYouTypeRef.current.input(inputValue)
Copy link
Copy Markdown
Author

@theo-sim-dev theo-sim-dev Jun 2, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like this function asYouTypeRef.current.input must be called with the given inputValue to fill other information, such as country (I assume it parses the given string and detect the country out of it). Please let me know if I misunderstood the intended behaviour here - without this line, it does not return any country-related information

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@theo-sim-dev