🪄 Enhancement - Prop that shows distinct country codes without area codes, and prop that returns only string instead of PhoneNumber object

[kanatzholayev]

Summary

I like your library, but there is some options i want to add

Show distinct country codes without area codes option

i do not really like this kind of duplicates in select, so we need here a boolean prop that will show only country codes without area codes

Return only string option

PhoneNumber object is great, but not all projects need that detailed object, sometimes we need just string. This library applies string in value prop, but when it returns to Form.Item, it always return object. I think there must be prop: valueAsString, that returns string like "+1 123 123123"

[ArtyomVancyan]

@kanatzholayev, thanks for the thoughts and recommendations. I like the idea of a boolean property that will show only a distinct list of countries. I will work on it in the coming weeks.

PhoneNumber object is great, but not all projects need that detailed object, sometimes we need just string.

Agreed, and of course, I counted this case. Ant Design's Form.Item has this normalize property that can easily convert anything to anything, such as an object, to a string.

import Form from "antd/es/form";
import PhoneInput from "antd-phone-input";
import {getRawValue} from "react-phone-hooks";

const Demo = () => {
    return (
        <Form.Item name="phone" normalize={getRawValue}>
            <PhoneInput />
        </Form.Item>
    )
}

NOTE: If you already have antd-phone-input installed, you don't need to install the react-phone-hooks package.

[ArtyomVancyan]

@kanatzholayev, please enjoy the new distinct boolean property for delisting the duplications from the countries list as you need.

<Form.Item name="phone">
    <PhoneInput distinct />
</Form.Item>