W-country-select NPM

w-country-select

react 的国家区号选择器，可验证手机号格式是否正确

react country select components

Usage

TODO

版本

v0.2.0 v0.2.2 解决自定义错误信息异常问题自定义设置错误信息设置 undefined ，显示默认错误提示

v0.1.9 解决部分问题，增加获取手机号验证是否正确的方法,处理清除逻辑，更改验证逻辑。

Development

import React, { useState } from 'react';
import { CountrySelect } from 'w-country-select';

interface CountryType {
  code: string; // 国家名称简写
  label: string; // 国家名称全写
  phone: string; // 国家区号
}

export default () => {
  const [selectValue, setSelectValue] = useState<CountryType>();
  const [phoneValue, setPhoneValue] = useState<string>();

  const onCountryChange = (value: CountryType | undefined) => {
    console.log(value);
    setSelectValue(value);
  };

  const onInputChange = (value: string) => {
    console.log(value);
    setPhoneValue(value);
  };

  const isValid = (value: boolean) => {
    console.log(value);
  };

  return (
    <>
      <CountrySelect
        onCountryChange={onCountryChange}
        onInputChange={onInputChange}
      />
    </>
  );
};

.abc {
  :global {
    .custom-select {
      background-color: #fff;
    }

    .search-input {
      background: #fff;
    }

    .phone-input {
      width: 90px;
    }
  }
}

属性名	描述	类型	默认值
onCountryChange	选中的事件	const onCountryChange =(value: {code: string; label: string; phone: string; })=>{}
showPlusSign	号码是否显示加号（可选）	boolean	true
onInputChange	电话输入事件	const onInputChange = (value:string) => {}
isValid	获取验证号码是否正确的方法(可选)	const isValid = (value:boolean)=>{}
language	中英文（可选）	'en' \ 'cn	en
allowClear	允许删除（可选）	boolean	true
allowSearch	区号搜索（可选）	boolean	true
warpClassName	最外层自定义类名（可选）	string
countryOptions	自定义国家数据（可选）	{code: string; label: string; phone:string;}[]	(参考) https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js
errorMessage	自定义手机号验证失败错误提示（可选）	string
defaultCountry	默认选中的城市(可选),支持 label(国家全写),code（国家简写）,不支持 phone（国家区号，部分国家区号相同）	code?: CountryType'code';label?: CountryType'label';	(数据参考) 同自定义国家数据参考 url
phonePlaceHolder	自定义输入框提示（可选）	string \ '' \ undefined	''
priorityCountry	建议城市，优先展示，按数组出现顺序排序（可选） ,仅支持国家简写，不区分大小写例子：'cn','us','at'	string[]
phoneNum	电话值(可选)	string
countryData	城市值(可选) label(国家全写),code（国家简写）	{code?:string} {label?:string}