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: 1. To avoid unnecessary encapsulation for different locales,
4.0lifted 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. 2.Tree Shakingis supported in4.1, you need to installworld_countries_listsexplicitly. Thus, you could customize translation JSON and it is better thanareaMapperinConfigProvider. 3.world_countries_listsupdated their file structure from 2.4.0:world_countries_lists/data/en/world.json->world_countries_lists/data/countries/en/world.json.
```tsx | pure 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 ( ); };
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!
$ claude mcp add antd-country-phone-input \
-- python -m otcore.mcp_server <graph>