Country phone input component as standard Ant.Design form item.
npm install antd-country-phone-input world_countries_lists
or
yarn add antd-country-phone-input world_countries_lists
Breaking Changes:
- To avoid unnecessary encapsulation for different locales,
4.0
lifted areas state up toConfigProvider
(based on React Context). You need to put it in the right place(index.js/App.js/...), then all components will have access to the provided config.Tree Shaking
is supported in4.1
, you need to installworld_countries_lists
explicitly. Thus, you could customize translation JSON and it is better thanareaMapper
inConfigProvider
.world_countries_lists
updated their file structure from 2.4.0:world_countries_lists/data/en/world.json
->world_countries_lists/data/countries/en/world.json
.
import CountryPhoneInput, { ConfigProvider } from 'antd-country-phone-input';
import en from 'world_countries_lists/data/countries/en/world.json';
// Usually you only need to import ConfigProvider & CSS once in App.js/App.tsx
// CSS order is important!
import 'antd/dist/antd.css';
import 'antd-country-phone-input/dist/index.css';
const App = () => {
return (
<ConfigProvider locale={en}>
<CountryPhoneInput />
</ConfigProvider>
);
};
export default App;
Try it on our website: https://boyuai.github.io/antd-country-phone-input/demos/
Field | Type | Note |
---|---|---|
short | string | See ISO 3166-1 |
phoneCode | number | |
emoji | ReactNode | National flag |
name | string |
Have a look at this!