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.