React International Phone

https://react-international-phone.vercel.app/docs
Admin
A React component for an international phone input, providing features like country code selection...
Tokens:11,855
Snippets:96
Trust Score:7.8
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install with npm

Source: https://react-international-phone.vercel.app/docs/getting-started

Use this command to install the library using npm.

```bash
npm install react-international-phone  
```

--------------------------------

### Install with pnpm

Source: https://react-international-phone.vercel.app/docs/getting-started

Use this command to install the library using pnpm.

```bash
pnpm add react-international-phone  
```

--------------------------------

### Install with Yarn

Source: https://react-international-phone.vercel.app/docs/getting-started

Use this command to install the library using Yarn.

```bash
yarn add react-international-phone  
```

--------------------------------

### Basic Example with Custom Flags and Styling

Source: https://react-international-phone.vercel.app/docs/Usage/CustomCountryFlags

This example demonstrates setting up custom flags, filtering countries to match them, and applying custom flag dimensions using CSS variables. Ensure 'react-international-phone/style.css' is imported.

```jsx
import 'react-international-phone/style.css';

import React, { useState } from 'react';
import {
  defaultCountries,
  parseCountry,
  PhoneInput,
} from 'react-international-phone';

const customFlags = [
  {
    iso2: 'ua',
    src: '/flags/ua.svg',
  },
  {
    iso2: 'fr',
    src: '/flags/fr.svg',
  },
  {
    iso2: 'jp',
    src: '/flags/jp.svg',
  },
  {
    iso2: 'pl',
    src: '/flags/pl.svg',
  },
];

const countries = defaultCountries.filter((c) => {
  const country = parseCountry(c);
  return customFlags.map((f) => f.iso2).includes(country.iso2);
});

const App = () => {
  const [phone, setPhone] = useState('');

  return (
    <PhoneInput
      countries={countries}
      flags={customFlags}
      style={
        {
          // style with css variables or with ".react-international-phone-flag-emoji" class
          '--react-international-phone-flag-width': '24px',
          '--react-international-phone-flag-height': '24px',
        } as React.CSSProperties
      }
      value={phone}
      onChange={setPhone}
      defaultCountry="jp"
      placeholder="Phone number"
    />
  );
};

```

--------------------------------

### Format Configuration Object Example

Source: https://react-international-phone.vercel.app/docs/Usage/ModifyCountries

Shows an example of a `FormatConfig` object used for defining custom phone number formatting rules. It includes a required 'default' key and can have keys based on regular expressions to apply specific masks.

```javascript
{
  'default': '. .... ....',
  '/^4/': '... ... ...',
  '/^5(?!50)/': '... ... ...'
}

```

--------------------------------

### Basic Example of getActiveFormattingMask

Source: https://react-international-phone.vercel.app/docs/Usage/GetActiveCountryMask

Demonstrates how to use `getActiveFormattingMask` within the `onChange` handler of `PhoneInput` to get the formatting mask for the current phone number and country. Ensure the `phone` is in E.164 format and `country` is a parsed country object.

```javascript
import { PhoneInput, getActiveFormattingMask } from 'react-international-phone';

const App = () => {
  const [phone, setPhone] = useState('');

  return (
    <PhoneInput
      value={phone}
      onChange={(phone, { country }) => {
        setPhone(phone);
        const mask = getActiveFormattingMask({ phone, country });
        // use formatting mask for your purposes
      }})
    />
  )
}

```

--------------------------------

### Basic usePhoneInput Hook Usage

Source: https://react-international-phone.vercel.app/docs/Advanced-Usage/usePhoneInput

This snippet demonstrates the basic setup and usage of the usePhoneInput hook. It shows how to destructure the returned values and pass them to an input component.

```javascript
// import { usePhoneInput } from 'react-international-phone';  
  
const {  
  inputValue,  
  phone,  
  country,  
  setCountry,  
  handlePhoneValueChange,  
  inputRef,  
} = usePhoneInput({  
  defaultCountry: 'us',  
  value: '+1 (234)',  
  onChange: ({ phone, inputValue, country }) => {  
    // make something on change  
  },  
});  

```

--------------------------------

### Material UI Phone Input Example

Source: https://react-international-phone.vercel.app/docs/Advanced-Usage/useWithUiLibs

This example shows how to integrate the usePhoneInput hook with Material UI's TextField and Select components to create a customizable phone input field. It includes country selection with flags and dial codes.

```javascript
import 'react-international-phone/style.css';  
  
import {  
  InputAdornment,  
  MenuItem,  
  Select,  
  TextField,  
  Typography,  
} from '@mui/material';  
import React from 'react';  
import {  
  defaultCountries,  
  FlagImage,  
  parseCountry,  
  usePhoneInput,  
} from 'react-international-phone';  
  
export const MuiPhone = ({ value, onChange, ...restProps }) => {  
  const { inputValue, handlePhoneValueChange, inputRef, country, setCountry } =  
    usePhoneInput({  
      defaultCountry: 'us',  
      value,  
      countries: defaultCountries,  
      onChange: (data) => {  
        onChange(data.phone);  
      },  
    });  
  
  return (  
    <TextField  
      variant="outlined"  
      label="Phone number"  
      color="primary"  
      placeholder="Phone number"  
      value={inputValue}  
      onChange={handlePhoneValueChange}  
      type="tel"  
      inputRef={inputRef}  
      InputProps={{  
        startAdornment: (  
          <InputAdornment  
            position="start"  
            style={{ marginRight: '2px', marginLeft: '-8px' }}  
          >  
            <Select  
              MenuProps={{  
                style: {  
                  height: '300px',  
                  width: '360px',  
                  top: '10px',  
                  left: '-34px',  
                },  
                transformOrigin: {  
                  vertical: 'top',  
                  horizontal: 'left',  
                },  
              }}  
              sx={{  
                width: 'max-content',  
                // Remove default outline (display only on focus)  
                fieldset: {  
                  display: 'none',  
                },  
                '&.Mui-focused:has(div[aria-expanded="false"])': {  
                  fieldset: {  
                    display: 'block',  
                  },  
                },  
                // Update default spacing  
                '.MuiSelect-select': {  
                  padding: '8px',  
                  paddingRight: '24px !important',  
                },  
                svg: {  
                  right: 0,  
                },  
              }}  
              value={country.iso2}  
              onChange={(e) => setCountry(e.target.value)}  
              renderValue={(value) => (  
                <FlagImage iso2={value} style={{ display: 'flex' }} />  
              )}  
            >  
              {defaultCountries.map((c) => {  
                const country = parseCountry(c);  
                return (  
                  <MenuItem key={country.iso2} value={country.iso2}>  
                    <FlagImage  
                      iso2={country.iso2}  
                      style={{ marginRight: '8px' }}  
                    />  
                    <Typography marginRight="8px">{country.name}</Typography>  
                    <Typography color="gray">+{country.dialCode}</Typography>  
                  </MenuItem>  
                );  
              })}  
            </Select>  
          </InputAdornment>  
        ),  
      }}  
      {...restProps}  
    />  
  );  
};  

```

--------------------------------

### Parsed Country Object Example

Source: https://react-international-phone.vercel.app/docs/Usage/PhoneInput

An example illustrating the data structure of a parsed country object, showing typical values for name, iso2, dialCode, and format.

```javascript
{
  name: 'Ukraine';
  iso2: 'ua';
  dialCode: '380';
  format: '(..) ... .. ..';
  priority: undefined;
  areaCodes: undefined;
}
```

--------------------------------

### Modifying Country Data with parseCountry and buildCountryData

Source: https://react-international-phone.vercel.app/docs/Usage/ModifyCountries

This example shows how to use the `parseCountry` and `buildCountryData` helper functions to modify country data, such as converting country names to lowercase, before rebuilding the country data array.

```javascript
const lowercasedCountries = defaultCountries.map((country) => {
  const parsedCountry = parseCountry(country);
  // lowercase country names, for example
  parsedCountry.name = parsedCountry.name.toLowerCase();

  return buildCountryData(parsedCountry);
});

```

--------------------------------

### Basic Phone Input with Validation

Source: https://react-international-phone.vercel.app/docs/Usage/PhoneValidation

Demonstrates a basic setup for the PhoneInput component, including state management for the phone number and a custom validation function using google-libphonenumber. The input is disabled and an error message is shown if the phone number is not valid.

```javascript
import { PhoneNumberUtil } from 'google-libphonenumber';  
import React, { useState } from 'react';  
import { PhoneInput } from 'react-international-phone';  
import 'react-international-phone/style.css';  
  
const phoneUtil = PhoneNumberUtil.getInstance();  
  
const isPhoneValid = (phone: string) => {  
  try {  
    return phoneUtil.isValidNumber(phoneUtil.parseAndKeepRawInput(phone));  
  } catch (error) {  
    return false;  
  }  
};  
  
const App = () => {  
  const [phone, setPhone] = useState('');  
  const isValid = isPhoneValid(phone);  
  
  return (  
    <form  
      onSubmit={(e) => {  
        // some submit logic  
        e.preventDefault();  
        alert(`Submitted phone: ${phone}`);  
      }}  
    >  
      <PhoneInput  
        defaultCountry="ua"  
        value={phone}  
        onChange={(phone) => setPhone(phone)}  
      />  
  
      {!isValid && <div style={{ color: 'red' }}>Phone is not valid</div>}  
  
      <button  
        disabled={!isValid}  
        type="submit"  
      >  
        Submit  
      </button>  
    </form>  
  );
};

```

--------------------------------

### Customizing Country List for PhoneInput

Source: https://react-international-phone.vercel.app/docs/Usage/ModifyCountries

This example demonstrates how to filter the default country list to include only specific countries ('us', 'ua', 'gb') for use in the PhoneInput component.

```javascript
import {
  PhoneInput,
  defaultCountries,
  parseCountry,
} from 'react-international-phone';

const countries = defaultCountries.filter((country) => {
  const { iso2 } = parseCountry(country);
  return ['us', 'ua', 'gb'].includes(iso2);
});

const App = () => {
  const [phone, setPhone] = useState('');

  return (
    <div>
      <PhoneInput
        defaultCountry="ua"
        phone={phone}
        onChange={setPhone}
        countries={countries}
      />
    </div>
  );
};

```

--------------------------------

### Render FlagImage Component

Source: https://react-international-phone.vercel.app/docs/Subcomponents-API/FlagImage

Use the FlagImage component by providing the 'iso2' property for the country code and optionally a 'size' property to control the flag's dimensions. This example shows how to render the flag for Ukraine with a size of 30 pixels.

```javascript
<FlagImage iso2="ua" size="30px" />
```

--------------------------------

### Basic Usage of PhoneInput

Source: https://react-international-phone.vercel.app/docs/getting-started

Demonstrates how to use the PhoneInput component in a React application. Remember to import the default styles.

```jsx
import { useState } from 'react';  
import { PhoneInput } from 'react-international-phone';  
import 'react-international-phone/style.css';  
  
const App = () => {  
  const [phone, setPhone] = useState('');  
  
  return (  
    <div>  
      <PhoneInput  
        defaultCountry="ua"  
        value={phone}  
        onChange={(phone) => setPhone(phone)}  
      />  
    </div>  
  );  
};  

```

```jsx
import 'react-international-phone/style.css';  
```

--------------------------------

### usePhoneInput Hook Documentation

Source: https://react-international-phone.vercel.app/docs/Advanced-Usage/usePhoneInput

This section details the arguments accepted by the usePhoneInput hook and the values it returns, enabling developers to integrate advanced phone input functionality into their React applications.

```APIDOC
## usePhoneInput Hook

**usePhoneInput** is a hook for providing phone formatting to existing input components.
Use `phone` (as value), `handlePhoneValueChange` (as onChange callback) and `inputRef` (as passed ref) to handle input.

### Hook Arguments

*   **`value`** (string) - Phone value. Default: `""`
*   **`onChange`** ((data: { phone: string; inputValue: string; country: ParsedCountry }) => void) - Callback that calls on phone change. Default: `undefined`
*   **`defaultCountry`** (CountryIso2) - Default country value (iso2). Default: `"us"`
*   **`countries`** (CountryData[]) - An array of available countries to select (and guess). Default: `defaultCountries`
*   **`prefix`** (string) - Prefix for phone value. Default: `"+"`
*   **`defaultMask`** (string) - This mask will apply on countries that does not have specified mask. Default: `"............"`
*   **`charAfterDialCode`** (string) - Char that renders after country dial code. Default: `" "`
*   **`historySaveDebounceMS`** (number) - Save value to history if there were not any changes in provided milliseconds timeslot. Undo/redo (ctrl+z/ctrl+shift+z) works only with values that are saved in history. Default: `200`
*   **`disableCountryGuess`** (boolean) - Disable country guess on value change. `onCountryGuess` callback would not be called. Default: `false`
*   **`disableDialCodePrefill`** (boolean) - Disable dial code prefill on initialization. Dial code prefill works only when empty phone value have been provided. Default: `false`
*   **`forceDialCode`** (boolean) - Always display the dial code. Dial code can't be removed/changed by keyboard events, but it can be changed by pasting another country phone value. Default: `false`
*   **`disableDialCodeAndPrefix`** (boolean) - Display phone value will not include passed `dialCode` and `prefix` if set to `true`. `forceDialCode` value will be ignored. Default: `false`
*   **`disableFormatting`** (boolean) - Disable phone value mask formatting. All formatting characters will not be displayed, but the mask length will be preserved. Default: `false`
*   **`allowMaskOverflow`** (boolean) - Allow input to exceed the mask length. When set to `true`, formatting mask will apply to the part that fits within the mask capacity, and overflow digits will be appended at the end unformatted. For example: `"+123456789012"`, will be formatted like `"+1 (234) 567-89012"`. Default: `false`
*   **`inputRef`** (React.MutableRefObject<HTMLInputElement | null>) - Ref for the input element. Default: `undefined`

### Returned Values

*   **`inputValue`** (string) - Formatted phone string. Value that should be rendered inside input element.
*   **`phone`** (string) - Phone in E164 format.
*   **`handlePhoneValueChange`** ((e: React.ChangeEvent<HTMLInputElement>) => string) - Change handler for input component.
*   **`inputRef`** (React.RefObject<HTMLInputElement>) - Ref object for input component (handles caret position, focus and undo/redo).
*   **`country`** (ParsedCountry) - Current country object.
*   **`setCountry`** ((country: CountryIso2, options?: { focusOnInput: boolean }) => void) - Country setter.
```

--------------------------------

### getActiveFormattingMask with Configuration Properties

Source: https://react-international-phone.vercel.app/docs/Usage/GetActiveCountryMask

Shows how to pass configuration properties like `prefix`, `defaultMask`, or `disableFormatting` to `getActiveFormattingMask`. These properties must match those provided to the `PhoneInput` component.

```javascript
getActiveFormattingMask({
  country,
  phone,
  prefix: '+',
  defaultMask: '............',
  disableFormatting: false,
});

```

--------------------------------

### PhoneInput with Ref Forwarding

Source: https://react-international-phone.vercel.app/docs/Usage/PhoneInput

Demonstrates how to forward a ref to the PhoneInput component to access the inner input element. This is useful for imperative actions or focusing the input.

```javascript
const PhoneWithRef = () => {
  const ref = useRef(null);
  return (
    <PhoneInput ref={ref}>;
  )
}
```

--------------------------------

### Use DialCodePreview Component

Source: https://react-international-phone.vercel.app/docs/Subcomponents-API/DialCodePreview

Use the DialCodePreview component by providing the dialCode and prefix properties.

```javascript
<DialCodePreview dialCode="1" prefix="+" />
```

--------------------------------

### Phone Input Properties

Source: https://react-international-phone.vercel.app/docs/Usage/PhoneInput

This section outlines the configurable properties for the phone input component.

```APIDOC
## Properties

### `value`
Phone value.
  * Type: `string`
  * Default: `""`

### `onChange`
Callback that calls on phone change
  * Type: `(phone: string, meta: { country: ParsedCountry, inputValue: string }) => void`
  * Default: `undefined`

### `defaultCountry`
Default country value (iso2).
  * Type: `CountryIso2`
  * Default: `"us"`

### `countries`
An array of available countries to select (and guess)
  * Type: `CountryData[]`
  * Default: `defaultCountries`

### `preferredCountries`
An array of countries to display at the top of the dropdown list
  * Type: `CountryIso2[]`
  * Default: `[]`

### `hideDropdown`
Hide the dropdown icon. Make country selection not accessible.
  * Type: `boolean`
  * Default: `false`

### `disabled`
Disable phone input and country selector.
  * Type: `boolean`
  * Default: `false`

### `prefix`
Prefix for phone value.
  * Type: `string`
  * Default: `"+"`

### `defaultMask`
This mask will apply on countries that does not have specified mask.
  * Type: `string`
  * Default: `"............"`

### `charAfterDialCode`
Char that renders after country dial code.
  * Type: `string`
  * Default: `" "`

### `historySaveDebounceMS`
Save value to history if there were not any changes in provided milliseconds timeslot. Undo/redo (ctrl+z/ctrl+shift+z) works only with values that are saved in history
  * Type: `number`
  * Default: `200`

### `disableCountryGuess`
Disable country guess on value change. `onCountryGuess` callback would not be called.
  * Type: `boolean`
  * Default: `false`

### `disableDialCodePrefill`
Disable dial code prefill on initialization. Dial code prefill works only when empty phone value have been provided.
  * Type: `boolean`
  * Default: `false`

### `forceDialCode`
Always display the dial code. Dial code can't be removed/changed by keyboard events, but it can be changed by pasting another country phone value.
  * Type: `boolean`
  * Default: `false`

### `disableDialCodeAndPrefix`
Display phone value will not include passed `dialCode` and `prefix` if set to `true`. `forceDialCode` value will be ignored.
  * Type: `boolean`
  * Default: `false`

### `showDisabledDialCodeAndPrefix`
Show prefix and dial code between country selector and phone input. Works only when `disableDialCodeAndPrefix` is `true`
  * Type: `boolean`
  * Default: `false`

### `disableFocusAfterCountrySelect`
Disable auto focus on input field after country select.
  * Type: `boolean`
  * Default: `false`

### `disableFormatting`
Disable phone value mask formatting. All formatting characters will not be displayed, but the mask length will be preserved.
  * Type: `boolean`
  * Default: `false`

### `allowMaskOverflow`
Allow input to exceed the mask length. When set to `true`, formatting mask will apply to the part that fits within the mask capacity, and overflow digits will be appended at the end unformatted.  
For example: `"+123456789012"`, will be formatted like `"+1 (234) 567-89012"
  * Type: `boolean`
  * Default: `false`

### `flags`
Custom flag URLs array
  * Type: `CustomFlagImage[]`
  * Default: `undefined`

### `inputProps`
Default input component props
  * Type: `InputHTMLAttributes`
  * Default: `undefined`

note
Input props like `onFocus`, `onBlur`, `name`, `placeholder`, `disabled`, `required` and `autoFocus` also supported as top-level props.  
If you want add some additional attributes to the input element, you can do it using `inputProps`
```

--------------------------------

### PhoneInput with Ref Forwarding (TypeScript)

Source: https://react-international-phone.vercel.app/docs/Usage/PhoneInput

Shows how to correctly type a forwarded ref for the PhoneInput component when using TypeScript, utilizing the PhoneInputRefType.

```typescript
import { PhoneInputRefType } from 'react-international-phone';
// ...
const ref = useRef<PhoneInputRefType>(null);
```

--------------------------------

### CountrySelectorDropdown Component Usage

Source: https://react-international-phone.vercel.app/docs/Subcomponents-API/CountrySelectorDropdown

Demonstrates how to import and use the CountrySelectorDropdown component with its essential props.

```APIDOC
## Import Component
```javascript
import { CountrySelectorDropdown } from 'react-international-phone';
```

## Usage Example

Use by providing the `show`, `selectedCountry`, and `onSelect` properties.

```javascript
<CountrySelectorDropdown  
  show={true}  
  selectedCountry="al"  
  onSelect={handleSelect}  
  onClose={handleClose}
/>
```

### Props

*   **show** (boolean) - Controls the visibility of the dropdown.
*   **selectedCountry** (string) - The currently selected country code (e.g., 'al' for Albania).
*   **onSelect** (function) - Callback function triggered when a country is selected. It receives the country code as an argument.
*   **onClose** (function) - Callback function triggered when the dropdown is closed.
```

--------------------------------

### Accessing Individual Country Data

Source: https://react-international-phone.vercel.app/docs/Usage/ModifyCountries

Demonstrates how to access and destructure the data for a single country from the `defaultCountries` array using array destructuring.

```javascript
const [name, iso2, dialCode, format, priority, areaCodes] = defaultCountries[0];

```

--------------------------------

### CountrySelector Component

Source: https://react-international-phone.vercel.app/docs/Subcomponents-API/CountrySelector

This snippet shows how to import and use the CountrySelector component. It demonstrates providing the `selectedCountry` prop to pre-select a country and the `onSelect` prop to handle the country selection event, which returns the ISO 2-letter country code.

```APIDOC
## CountrySelector Component

### Description

The `CountrySelector` component is a UI element that allows users to select a country. It is typically used within forms or settings where country information is required.

### Usage

Import the component from the library and use it by providing the `selectedCountry` prop to set the initial country and an `onSelect` callback function to handle user interactions.

### Props

- **selectedCountry** (string) - Required - The ISO 3166-1 alpha-2 code of the initially selected country (e.g., "ua").
- **onSelect** (function) - Required - A callback function that is invoked when a country is selected. It receives an object containing the `iso2` property, which is the selected country's ISO 3166-1 alpha-2 code.

### Example

```jsx
import { CountrySelector } from 'react-international-phone';

// Inside your component:
const [country, setCountry] = useState('ua');

<CountrySelector
  selectedCountry={country}
  onSelect={({ iso2 }) => setCountry(iso2)}
/>
```
```

--------------------------------

### DialCodePreview Component

Source: https://react-international-phone.vercel.app/docs/Subcomponents-API/DialCodePreview

The DialCodePreview component allows users to preview a selected country's dial code. It can be imported and used by providing the `dialCode` and `prefix` properties. Additional properties like `disabled` and style-related props are available for customization.

```APIDOC
## DialCodePreview Component

### Description
Displays a selected country's dial code with an optional prefix.

### Usage
Import the component and use it with the required `dialCode` and `prefix` properties.

```javascript
import { DialCodePreview } from 'react-international-phone';

<DialCodePreview dialCode="1" prefix="+ " />
```

### Properties

#### `dialCode`
* Type: `string`
* Description: Country dial code (iso2).

#### `prefix`
* Type: `string`
* Description: Dial code prefix.

#### `disabled`
* Type: `boolean`
* Default: `undefined`
* Description: Determines if the component is disabled.

#### Style Properties (`DialCodePreviewStyleProps` type)
* `style` (CSSProperties): Custom styles for the DialCodePreview container.
* `className` (string): Custom className for the DialCodePreview container.

### CSS Variables
* `--react-international-phone-dial-code-preview-background-color`: `--react-international-phone-background-color`
* `--react-international-phone-dial-code-preview-border-color`: `--react-international-phone-border-color`
* `--react-international-phone-dial-code-preview-text-color`: `--react-international-phone-text-color`
* `--react-international-phone-dial-code-preview-font-size`: `--react-international-phone-font-size`
* `--react-international-phone-dial-code-preview-disabled-background-color`: `--react-international-phone-disabled-background-color`
* `--react-international-phone-dial-code-preview-disabled-text-color`: `--react-international-phone-disabled-text-color`
```

--------------------------------

### Basic PhoneInput Usage

Source: https://react-international-phone.vercel.app/docs/Usage/PhoneInput

Use the PhoneInput component by providing the defaultCountry, value, and an onChange callback. This sets up a functional phone input field with country selection.

```javascript
<PhoneInput  
  defaultCountry="ua"  
  value={phone}  
  onChange={(phone) => setPhone(phone)}  
/>  
```

--------------------------------

### Import DialCodePreview Component

Source: https://react-international-phone.vercel.app/docs/Subcomponents-API/DialCodePreview

Import the DialCodePreview component from the react-international-phone library.

```javascript
import { DialCodePreview } from 'react-international-phone';
```

--------------------------------

### Import PhoneInput Component

Source: https://react-international-phone.vercel.app/docs/Usage/PhoneInput

Import the PhoneInput component from the react-international-phone library. This is the first step before using the component in your application.

```javascript
import { PhoneInput } from 'react-international-phone';  
```

--------------------------------

### Import FlagImage Component

Source: https://react-international-phone.vercel.app/docs/Subcomponents-API/FlagImage

Import the FlagImage component from the react-international-phone library. This is the first step to using the component in your application.

```javascript
import { FlagImage } from 'react-international-phone';
```

--------------------------------

### Country Data Structure

Source: https://react-international-phone.vercel.app/docs/Usage/ModifyCountries

Illustrates the format of each country entry within the `defaultCountries` array. This structure includes the country name, ISO2 code, dial code, and optional formatting and area code information.

```javascript
[
  string, // country name
  CountryIso2, // iso2 code
  string, // international dial code
  FormatConfig | string, // format (optional)
  number, // order priority (optional)
  string[], // area codes (optional)
]

```

--------------------------------

### Use CountrySelector Component

Source: https://react-international-phone.vercel.app/docs/Subcomponents-API/CountrySelector

Use the CountrySelector component by providing the selected country's ISO code and an onSelect callback function. The onSelect callback receives an object containing the iso2 code of the selected country.

```javascript
<CountrySelector  
  selectedCountry="ua"  
  onSelect={({ iso2 }) => setCountry(iso2)}  
/>  
```

--------------------------------

### Passing Custom Flags to PhoneInput

Source: https://react-international-phone.vercel.app/docs/Usage/CustomCountryFlags

Use the 'flags' prop to pass an array of objects, each containing an 'iso2' country code and the 'src' of the flag image. If a flag is not provided, a default twemoji icon will be used.

```jsx
<PhoneInput  
  flags={[
    {
      iso2: 'ua',
      src: '/flags/ua.svg',
    },
    {
      iso2: 'fr',
      src: '/flags/fr.svg',
    },
    // ...
  ]}
/>
```

--------------------------------

### CountrySelectorDropdown Properties

Source: https://react-international-phone.vercel.app/docs/Subcomponents-API/CountrySelectorDropdown

Configuration options for the CountrySelectorDropdown component, including visibility, country selection, and event callbacks.

```APIDOC
## Properties

### `show`
Show dropdown
* Type: `boolean`

### `dialCodePrefix`
Prefix for country code
* Type: `string`
* Default: `"+"`

### `selectedCountry`
Selected option country code (iso2)
* Type: `CountryIso2`
* Default: `undefined`

### `onSelect`
Callback that calls on option select
* Type: `(country: ParsedCountry) => void`
* Default: `undefined`

### `onClose`
Callback that calls on dropdown close without select any item (usually by keyboard events)
* Type: `() => void`
* Default: `undefined`
```

--------------------------------

### Use CountrySelectorDropdown Component

Source: https://react-international-phone.vercel.app/docs/Subcomponents-API/CountrySelectorDropdown

Render the CountrySelectorDropdown component by providing the 'show', 'selectedCountry', and 'onSelect' properties. The 'onClose' property can be used to handle the event when the dropdown is closed.

```javascript
<CountrySelectorDropdown  
  show={true}  
  selectedCountry="al"  
  onSelect={handleSelect}  
  onClose={handleClose}  
/>  
```

--------------------------------

### Import CountrySelectorDropdown

Source: https://react-international-phone.vercel.app/docs/Subcomponents-API/CountrySelectorDropdown

Import the CountrySelectorDropdown component from the react-international-phone library.

```javascript
import { CountrySelectorDropdown } from 'react-international-phone';
```

--------------------------------

### FlagImage Component

Source: https://react-international-phone.vercel.app/docs/Subcomponents-API/FlagImage

The FlagImage component is used for rendering country flags. It accepts properties like iso2, src, protocol, and disableLazyLoading to customize its appearance and behavior. It also supports standard style properties.

```APIDOC
## FlagImage Component

### Description

This component renders a country flag. It is utilized within `CountrySelector` and `CountrySelectorDropdown`.

### Properties

#### `iso2`
* Type: `string`
* Description: ISO 2 code of the country flag.

#### `src`
* Type: `string`
* Description: Custom source URL for the flag image.
* Default: `undefined`

#### `protocol`
* Type: `"http" | "https"`
* Description: Protocol to use with the twemoji CDN.
* Default: `"https"`

#### `disableLazyLoading`
* Type: `boolean`
* Description: Disables lazy loading of flags. The `loading="lazy"` attribute will not be set.
* Default: `false` (Note: The source incorrectly states default as "https", corrected to boolean false based on common practice for such flags)

#### Style Properties
* `size` (CSSProperties['width']): Size of the flag (sets width and height).
* `style` (CSSProperties): Custom styles object.
* `className` (string): Custom CSS class name.

#### CSS Variables
* `--react-international-phone-flag-width`: Default value `24px`.
* `--react-international-phone-flag-height`: Default value `24px`.

### Usage Example

Import component:
```javascript
import { FlagImage } from 'react-international-phone';
```

Use by providing the `iso2` property:
```javascript
<FlagImage iso2="ua" size="30px" />
```
```

--------------------------------

### CountrySelector Component Properties

Source: https://react-international-phone.vercel.app/docs/Subcomponents-API/CountrySelector

This section outlines the direct properties that can be passed to the CountrySelector component to control its behavior and initial state.

```APIDOC
## CountrySelector Component Properties

### `selectedCountry`

Selected country (iso2).

* Type: `CountryIso2`
* Default: `undefined`

### `onSelect`

Callback that calls on country select.

* Type: `(country: ParsedCountry) => void`
* Default: `undefined`

### `disabled`

Is CountrySelector disabled.

* Type: `boolean`
* Default: `undefined`

### `hideDropdown`

Hide dropdown icon and make CountrySelector not clickable.

* Type: `boolean`
* Default: `undefined`

### `renderButtonWrapper`

Render function for custom button wrapper. `children` and `rootProps` should be passed to button props. `rootProps` contains a click handler and properties that are required for accessibility. `rootProps` should be spread like `<button {...rootProps} />`.

* Type: `(props: { children: React.ReactNode; rootProps: React.ButtonHTMLAttributes<HTMLButtonElement>) => React.ReactNode`
* Default: `undefined`
```

--------------------------------

### CountrySelectorDropdown CSS Variables

Source: https://react-international-phone.vercel.app/docs/Subcomponents-API/CountrySelectorDropdown

CSS variables available for fine-grained control over the styling of the CountrySelectorDropdown component.

```APIDOC
## CSS variables

Variable| Default value  
---|---
--react-international-phone-dropdown-item-font-size| `14px`  
--react-international-phone-dropdown-item-text-color| --react-international-phone-text-color  
--react-international-phone-dropdown-item-height| `28px`  
--react-international-phone-dropdown-item-background-color| --react-international-phone-background-color  
--react-international-phone-dropdown-item-dial-code-color| `gray`  
--react-international-phone-selected-dropdown-item-text-color| --react-international-phone-text-color  
--react-international-phone-selected-dropdown-item-background-color| `whitesmoke`  
--react-international-phone-selected-dropdown-item-dial-code-color| --react-international-phone-dropdown-item-dial-code-color  
--react-international-phone-focused-dropdown-item-background-color| --react-international-phone-selected-dropdown-item-background-color  
--react-international-phone-dropdown-shadow| `2px 2px 16px rgb(0 0 0 / 25%)`  
--react-international-phone-dropdown-left| `0`  
--react-international-phone-dropdown-top| `44px`  
--react-international-phone-dropdown-preferred-list-divider-color| --react-international-phone-border-color  
--react-international-phone-dropdown-preferred-list-divider-margin| `0`
```

--------------------------------

### CountrySelector CSS Variables

Source: https://react-international-phone.vercel.app/docs/Subcomponents-API/CountrySelector

This section lists the CSS variables available for further customization of the CountrySelector component's appearance.

```APIDOC
## CSS variables

Variable| Default value  
---|---
--react-international-phone-country-selector-background-color| --react-international-phone-background-color  
--react-international-phone-country-selector-background-color-hover| `whitesmoke`  
--react-international-phone-disabled-country-selector-background-color| --react-international-phone-disabled-background-color  
--react-international-phone-country-selector-border-color| `gainsboro`  
--react-international-phone-country-selector-arrow-size| `4px`  
--react-international-phone-country-selector-arrow-color| `#777`  
--react-international-phone-disabled-country-selector-arrow-color| `#999`
```

--------------------------------

### CountrySelector Style Properties

Source: https://react-international-phone.vercel.app/docs/Subcomponents-API/CountrySelector

This section details the style properties available for customizing the appearance of the CountrySelector component and its elements.

```APIDOC
## Style properties (`CountrySelectorStyleProps` type)

Prop| Type| Description  
---|---|---
style| `CSSProperties`| Custom styles for **CountrySelector container**  
className| `string`| Custom className for **CountrySelector container**  
buttonStyle| `CSSProperties`| Custom styles for **CountrySelector button**  
buttonClassName| `string`| Custom className for **CountrySelector button**  
buttonContentWrapperStyle| `CSSProperties`| Custom styles for **CountrySelector button content wrapper**  
buttonContentWrapperClassName| `string`| Custom className for **CountrySelector button content wrapper**  
flagStyle| `dropdownStyleProps`| Custom styles for **CountrySelector flag**  
flagClassName| `string`| Custom className for **CountrySelector flag**  
dropdownArrowStyle| `dropdownStyleProps`| Custom styles for **CountrySelector dropdown arrow**  
dropdownArrowClassName| `string`| Custom className for **CountrySelector dropdown arrow**  
dropdownStyleProps| `CountrySelectorDropdownStyleProps`| Style properties for **CountrySelector dropdown**
```

--------------------------------

### CountrySelectorDropdown Style Properties

Source: https://react-international-phone.vercel.app/docs/Subcomponents-API/CountrySelectorDropdown

Customization options for the visual appearance of the CountrySelectorDropdown component and its elements.

```APIDOC
## Style properties (`CountrySelectorDropdownStyleProps` type)

Prop| Type| Description  
---|---|---
style| `CSSProperties`| Custom styles for **CountrySelectorDropdown container**  
className| `string`| Custom className for **CountrySelectorDropdown container**  
listItemStyle| `CSSProperties`| Custom styles for **CountrySelectorDropdown list-item container**  
listItemClassName| `string`| Custom className for **CountrySelectorDropdown list-item container**  
listItemFlagStyle| `CSSProperties`| Custom styles for **CountrySelectorDropdown list-item flag**  
listItemFlagClassName| `string`| Custom className for **CountrySelectorDropdown list-item flag**  
listItemCountryNameStyle| `CSSProperties`| Custom styles for **CountrySelectorDropdown list-item country name**  
listItemCountryNameClassName| `string`| Custom className for **CountrySelectorDropdown list-item country name**  
listItemDialCodeStyle| `CSSProperties`| Custom styles for **CountrySelectorDropdown list-item country dial code**  
listItemDialCodeClassName| `string`| Custom className for **CountrySelectorDropdown list-item country dial code**
```

--------------------------------

### Import CountrySelector Component

Source: https://react-international-phone.vercel.app/docs/Subcomponents-API/CountrySelector

Import the CountrySelector component from the 'react-international-phone' library.

```javascript
import { CountrySelector } from 'react-international-phone';
```

--------------------------------

### Revert Phone Validation Logic to v2.1 Behavior

Source: https://react-international-phone.vercel.app/docs/Migrations/migrate-to-v2.2

Use this code to revert to the validation logic used before v2.2. It checks `isValid`, `areaCodeMatch`, and `formatMatch` to determine phone validity.

```javascript
const phoneValidation = usePhoneValidation('+1 (123) 456-7890');  
const isPhoneValid =  
  phoneValidation.isValid &&  
  phoneValidation.areaCodeMatch &&  
  phoneValidation.formatMatch;  

```

--------------------------------

### Create a Phone Number Validator Function

Source: https://react-international-phone.vercel.app/docs/Usage/PhoneValidation

This snippet shows how to create a reusable function to validate phone numbers using google-libphonenumber. It includes error handling for invalid phone number formats.

```typescript
import { PhoneNumberUtil } from 'google-libphonenumber';  
  
const phoneUtil = PhoneNumberUtil.getInstance();  
  
const isPhoneValid = (phone: string) => {  
  try {  
    return phoneUtil.isValidNumber(phoneUtil.parseAndKeepRawInput(phone));  
  } catch (error) {  
    return false;  
  }  
};  


```

--------------------------------

### Material UI Phone Input Integration

Source: https://react-international-phone.vercel.app/docs/Advanced-Usage/useWithUiLibs

This snippet shows how to create a reusable Material UI TextField component that integrates react-international-phone for international phone number input. It includes country selection with flags and handles phone number changes.

```typescript
import 'react-international-phone/style.css';  
  
import {  
  BaseTextFieldProps,  
  InputAdornment,  
  MenuItem,  
  Select,  
  TextField,  
  Typography,  
} from '@mui/material';  
import React from 'react';  
import {  
  CountryIso2,  
  defaultCountries,  
  FlagImage,  
  parseCountry,  
  usePhoneInput,  
} from 'react-international-phone';  
  
export interface MUIPhoneProps extends BaseTextFieldProps {  
  value: string;  
  onChange: (phone: string) => void;  
}  
  
export const MuiPhone: React.FC<MUIPhoneProps> = ({  
  value,  
  onChange,  
  ...restProps  
}) => {  
  const { inputValue, handlePhoneValueChange, inputRef, country, setCountry } =  
    usePhoneInput({  
      defaultCountry: 'us',  
      value,  
      countries: defaultCountries,  
      onChange: (data) => {  
        onChange(data.phone);  
      },  
    });  
  
  return (  
    <TextField  
      variant="outlined"  
      label="Phone number"  
      color="primary"  
      placeholder="Phone number"  
      value={inputValue}  
      onChange={handlePhoneValueChange}  
      type="tel"  
      inputRef={inputRef}  
      InputProps={{  
        startAdornment: (  
          <InputAdornment  
            position="start"  
            style={{ marginRight: '2px', marginLeft: '-8px' }}  
          >  
            <Select  
              MenuProps={{  
                style: {  
                  height: '300px',  
                  width: '360px',  
                  top: '10px',  
                  left: '-34px',  
                },  
                transformOrigin: {  
                  vertical: 'top',  
                  horizontal: 'left',  
                },  
              }}  
              sx={{  
                width: 'max-content',  
                // Remove default outline (display only on focus)  
                fieldset: {  
                  display: 'none',  
                },  
                '&.Mui-focused:has(div[aria-expanded="false"])': {  
                  fieldset: {  
                    display: 'block',  
                  },  
                },  
                // Update default spacing  
                '.MuiSelect-select': {  
                  padding: '8px',  
                  paddingRight: '24px !important',  
                },  
                svg: {  
                  right: 0,  
                },  
              }}  
              value={country.iso2}  
              onChange={(e) => setCountry(e.target.value as CountryIso2)}  
              renderValue={(value) => (  
                <FlagImage iso2={value} style={{ display: 'flex' }} />  
              )}  
            >  
              {defaultCountries.map((c) => {  
                const country = parseCountry(c);  
                return (  
                  <MenuItem key={country.iso2} value={country.iso2}>  
                    <FlagImage  
                      iso2={country.iso2}  
                      style={{ marginRight: '8px' }}  
                    />  
                    <Typography marginRight="8px">{country.name}</Typography>  
                    <Typography color="gray">+{country.dialCode}</Typography>  
                  </MenuItem>  
                );  
              })}  
            </Select>  
          </InputAdornment>  
        ),  
      }}  
      {...restProps}  
    />  
  );  
};  

```

--------------------------------

### ParsedCountry Type Definition

Source: https://react-international-phone.vercel.app/docs/Usage/PhoneInput

Defines the structure of the country object provided by the onChange callback. It includes details like name, ISO code, dial code, formatting, priority, and area codes.

```typescript
interface ParsedCountry {
  name: string;
  iso2: CountryIso2;
  dialCode: string;
  format: FormatConfig | string | undefined;
  priority: number | undefined;
  areaCodes: string[] | undefined;
}
```
Tokens:
Raw