Phone number input component

[kasmoto]

Phone number inputs are present in all kinds of flows.

What would be a great addition to Mantine would be a component which handles this out of the box.

Features:

• Ability to enable area code field
• Whitelist or blacklist countries
• Have latest international phone number regex baked in (ability to edit this regex via props)
• Sanitising of inputs

[kasmoto]

@Valar103769 the authoritative one is libphonenumber by Google.

This is not currently available as an NPM package, but there are some ports which capture most of the functionality.

1. https://www.npmjs.com/package/libphonenumber-js
2. https://www.npmjs.com/package/google-libphonenumber

I ended up using the first one.

[rhyek]

I made my own phone input component for Mantine using libphonenumber-js and react-imask: https://gist.github.com/rhyek/f56fbe372455ba8618f5becd67bb1658

Hopefully someone finds it useful.

[eedrxs]

@rtivital I agree with this feature request—PhoneInput should be first-class citizen in Mantine already. I'm interested in building this component, one that would be both versatile and in sync with Mantine's design philosophy. Is it okay to start working on this?

[rtivital]

It is already implemented and will be available in one of the 9.x releases.

[eedrxs]

Alright, then. Great work!