npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

antd-phone-input

v0.3.11

Published

Advanced, highly customizable phone input component for Ant Design.

Downloads

12,105

Readme

Antd Phone Input

npm Playground antd types License Tests

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.

{
  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 is shown below:

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 (
    <FormItem name="phone" rules={[{validator}]}>
      <PhoneInput enableSearch/>
    </FormItem>
  )
}

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.

Localization

The package provides a built-in localization feature that allows you to change the language of the component. The locale function returns the language object that can be passed to the ConfigProvider component of Ant Design.

import PhoneInput, {locale} from "antd-phone-input";

<ConfigProvider locale={locale("frFR")}>
  <PhoneInput/>
</ConfigProvider>

NOTE: If you use localization in the documented way, you should replace the object passed to the locale property with the locale function, specifying the desired language code.

Props

Apart from the phone-specific properties described below, all 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. | object / string | | country | Country code to be selected by default. By default, it will show the flag of the user's country. | string | | enableArrow | Shows an arrow next to the country flag. Default value is false. | boolean | | 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 | | disableParentheses | Disables parentheses from the input masks. Default enabled. | 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[] | | dropdownRender | Customize the dropdown menu content. | (menu: ReactNode) => ReactNode | | 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