antd-country-phone-input

antd-country-phone-input

Country phone input component as standard Ant.Design form item.

Installation

npm install antd-country-phone-input world_countries_lists

or

yarn add antd-country-phone-input world_countries_lists

Usage

Breaking Changes:

1. To avoid unnecessary encapsulation for different locales, 4.0 lifted areas state up to ConfigProvider(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 Shaking is supported in 4.1, you need to install world_countries_lists explicitly. Thus, you could customize translation JSON and it is better than areaMapper in ConfigProvider.
3. 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/

Value

Field	Type	Note
short	string	See ISO 3166-1
phoneCode	number
emoji	ReactNode	National flag
name	string

Locale

See world_countries_lists

Example

Have a look at this!