react-international-phone

🤙 International phone input component for React

Live demo: Storybook

Features

• 😎 Easy to integrate - Just import and use, no need for the initial setup. Integrate with any UI library using a headless hook.
• 🔍 Country guessing - Just start typing and the component will guess the country and format the phone. Country flags are rendered using Twemoji.
• ✨ Lightweight - Low bundle size, no third-party dependencies.
• 🌈 Easy to customize - Customize styles and component behavior using props.
• ⌨ Caret position handling - Typing in the middle of the input, selection and deletion feels naturally.
• ✔️ Validation - Easily validate entered phone numbers using provided functions.

Installation

1$ npm i react-international-phone

Basic usage

1import { useState } from 'react';
2import { PhoneInput } from 'react-international-phone';
3import 'react-international-phone/style.css';
4
5const App = () => {
6  const [phone, setPhone] = useState('');
7
8  return (
9    <div>
10      <PhoneInput
11        defaultCountry="ua"
12        value={phone}
13        onChange={(phone) => setPhone(phone)}
14      />
15    </div>
16  );
17};

Documentation

Find the full API reference on official documentation.

Migration

You can encounter some breaking changes after update between major versions.

Checkout migration documents that contain a list of breaking changes and ways to migrate:
Update from v3 to v4
Update from v2 to v3
Update from v1 to v2