react-international-phone

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

$ npm i react-international-phone

Basic usage

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>
  );
};

Documentation

Find the full API reference on official documentation.

Update from v1 to v2

You can encounter some breaking changes after update from v1 to v2
Checkout migration document that contains a list of breaking changes and ways to migrate.

Changelog

2.0.0 (2023-03-10)

Bug Fixes

• cursor: fix cursor position on autofocus (a7805fb)

• cursor: set cursor position on initialization (4176553)

• history: add history initial value function setter, fix state comparing (5893db6)

• PhoneInput: fix call onChange callback after redo/undo and country change (e8f5ffc)

• store country in history, update country flag on undo/redo (8259173)

• usePhoneInput: fix dial code population on phone removal after the first render (2b14c61)

• usePhoneInput: remove double rendering on initialization (241e3e1)

• refactor!: remove usePhone hook, change hideSpaceAfterDialCode with charAfterDialCode (69731ae)

BREAKING CHANGES

• usePhone hook has been removed
• hideSpaceAfterDialCode prop was changed with charAfterDialCode