Phone Input

({country, phoneNumber}) => {
  setValue({country, phoneNumber});
}

import * as React from "react";
import { PhoneInput } from "spaceweb/phone-input";

export default () => {
  const [value, setValue] = React.useState(undefined);
  return (
    <PhoneInput
      value={value}
      onChange={({ country, phoneNumber }) => {
        setValue({ country, phoneNumber });
      }}
      intent="default"
      variant="default"
    />
  );
}

Examples

AutoFocus

PhoneInput accepts an autoFocus prop. For information on its behaviour, check Input's autoFocus example.

As with many of our components, there is also an uncontrolled version, StatefulPhoneInput, which manages its own state.

Note that, default selected country will be the first country passed in countries.

Supported Countries

The following countries are available in the country selector dropdown. You can import these as an object COUNTRIES from spaceweb/phone-input. Note, the country objects are formatted for ease of use with our Select component.

COUNTRIES: {
  id: string,      // Country ISO
  label: string,   // Country Name
  dialCode: string // Country Dial Code
}

API

Phone Input props

Phone Input exports

You can import this module like so:

import {COUNTRIES} from 'spaceweb/phone-input'

It exports the following components or utility functions:

• COUNTRIES
• COUNTRY_SELECT_OPTIONS
• DEFAULT_MAX_DROPDOWN_HEIGHT
• DEFAULT_MAX_DROPDOWN_WIDTH
• EMPTY_LIST_HEIGHT
• ISO_REGEX
• ISO_TO_FLAG_OFFSET
• LIST_ITEM_HEIGHT
• OVERSCAN_COUNT
• PhoneInput
• STATE_CHANGE_TYPE
• StatefulPhoneInput
• getPhoneNumberWithCountryDialCode