Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/typesnippet/antd-phone-input
Advanced, highly customizable phone input component for Ant Design.
https://github.com/typesnippet/antd-phone-input
advanced ant ant-design antd component customizable design input number phone phone-number react
Last synced: 3 months ago
JSON representation
Advanced, highly customizable phone input component for Ant Design.
- Host: GitHub
- URL: https://github.com/typesnippet/antd-phone-input
- Owner: typesnippet
- License: mit
- Created: 2023-02-25T17:23:35.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-02-19T10:29:21.000Z (5 months ago)
- Last Synced: 2024-04-09T06:15:08.849Z (3 months ago)
- Topics: advanced, ant, ant-design, antd, component, customizable, design, input, number, phone, phone-number, react
- Language: TypeScript
- Homepage:
- Size: 614 KB
- Stars: 30
- Watchers: 2
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-ant-design - antd-phone-input - Advanced, highly customizable phone input component for Ant Design. (Components / Themes)
README
# Antd Phone Input 
[](https://www.npmjs.com/package/antd-phone-input)
[](https://github.com/ant-design/ant-design)
[](https://www.npmjs.com/package/antd-phone-input)
[](https://github.com/typesnippet/antd-phone-input/blob/master/LICENSE)
[](https://github.com/typesnippet/antd-phone-input/actions/workflows/tests.yml)
Advanced phone input component for Material UI that leverages the [react-phone-hooks](https://www.npmjs.com/package/react-phone-hooks) supporting all countries. The package is compatible with [antd](https://github.com/ant-design/ant-design) 4 and 5 versions. It provides built-in support for area codes and strict validation.
## Value
The value of the component is an object containing the parts of the phone number. This format of value gives a wide range of opportunities for handling the data in your desired way.
```javascript
{
countryCode: 1,
areaCode: "702",
phoneNumber: "1234567",
isoCode: "us",
valid: function valid(strict)
}
```
## Validation
The validation is checked by the `valid` function of the value object that returns a boolean value. An example with the [react-hook-form](https://www.npmjs.com/package/react-hook-form) is shown below:
```javascript
import React from "react";
import PhoneInput from "antd-phone-input";
import FormItem from "antd/es/form/FormItem";
const validator = (_, {valid}) => {
// if (valid(true)) return Promise.resolve(); // strict validation
if (valid()) return Promise.resolve(); // non-strict validation
return Promise.reject("Invalid phone number");
}
const Demo = () => {
return (
)
}
export default Demo;
```
The `valid` function primarily checks if a phone number has a length appropriate for its specified country. In addition, a more comprehensive validation can be performed, including verifying the dial and area codes' accuracy for the selected country. To activate the strict validation, pass `true` as the first argument to the `valid` function.
## Props
Apart from the phone-specific properties described below, all [Input](https://ant.design/components/input#input) properties supported by the used Ant Design version can be applied to the phone input component.
| Property | Description | Type |
|--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------|
| value | An object containing a parsed phone number or the raw number. This also applies to the `initialValue` property of [Form.Item](https://ant.design/components/form#formitem). | [object](#value) / string |
| country | Country code to be selected by default. By default, it will show the flag of the user's country. | string |
| enableSearch | Enables search in the country selection dropdown menu. Default value is `false`. | boolean |
| searchNotFound | The value is shown if `enableSearch` is `true` and the query does not match any country. Default value is `No country found`. | string |
| searchPlaceholder | The value is shown if `enableSearch` is `true`. Default value is `Search country`. | string |
| disableDropdown | Disables the manual country selection through the dropdown menu. | boolean |
| onlyCountries | Country codes to be included in the list. E.g. `onlyCountries={['us', 'ca', 'uk']}`. | string[] |
| excludeCountries | Country codes to be excluded from the list of countries. E.g. `excludeCountries={['us', 'ca', 'uk']}`. | string[] |
| preferredCountries | Country codes to be at the top of the list. E.g. `preferredCountries={['us', 'ca', 'uk']}`. | string[] |
| onChange | The only difference from the original `onChange` is that value comes first. | function(value, event) |
| onMount | The callback is triggered once the component gets mounted. | function(value) |
## 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](LICENSE)