antd-country-phone-input
Country phone input component as standard Ant.Design form item.
Currently supports 53 languages (ISO 3166-1 Alpha-2) Default language is Chinese (zh)
Installation
npm i antd-country-phone-input
Usage
import React from "react";
import ReactDOM from "react-dom";
import { Form } from "antd";
import CountryPhoneCode from "antd-country-phone-input";
import "antd/dist/antd.css";
const App = ({ form }) => {
const submit = e => {
e.preventDefault();
form.validateFields((err, values) => {
if (!err) {
console.log("Received values of form: ", values);
}
});
};
return (
<Form onSubmit={submit}>
<Form.Item>
{form.getFieldDecorator("countryPhone")(<CountryPhoneCode />)}
</Form.Item>
</Form>
);
};
const WrappedApp = Form.create({
mapPropsToFields(props) {
return {
countryPhone: Form.createFormField({
value: { code: 86, phone: "13012345678", short: "CN" },
lang: en
})
};
}
})(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<WrappedApp />, rootElement);Supported languages (ISO 639-1)
-
ar: Arabic -
az: Azerbaijani -
be: Belorussian -
bg: Bulgarian -
bn: Bengali -
bs: Bosnian -
ca: Catalan -
cs: Czech -
da: Danish -
de: German -
en: English -
es: Spanish -
et: Estonian -
fa: Persian -
fi: Finnish -
fr: French -
gl: Galician -
el: Greek -
he: Hebrew -
hi: Hindi -
hr: Croatian -
hu: Hungarian -
hy: Armenian -
it: Italian -
id: Indonesian -
ja: Japanese -
ka: Georgian -
kk: Kazakh -
ko: Korean -
ky: Kyrgyz -
lt: Lithuanian -
lv: Latvian -
mk: Macedonian -
mn: Mongolian -
ms: Malay -
nb: Norwegian Bokmål -
nl: Dutch -
nn: Norwegian Nynorsk -
pl: Polish -
pt: Portuguese -
ro: Romanian -
ru: Russian -
sk: Slovak -
sl: Slovene -
sr: Serbian -
sv: Swedish -
th: Thai -
tr: Turkish -
uk: Ukrainian -
ur: Urdu -
uz: Uzbek -
zh: Chinese -
vi: Vietnamese