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.
• 🔍 Country guessing - Just start typing and the component will guess the country.
• 🏳️ Country flags - Country flags are rendered using Twemoji.
• ⌨ Caret position handling - Typing in the middle of the input, selection and deletion feels naturally.
• ✨ Lightweight - Low bundle size, no third-party dependencies.
• 🌈 Easy to customize - Customize styles and component behavior using props.

Installation

$ npm i react-international-phone

Basic usage

import { useState } from 'react';
import { PhoneInput } from 'react-international-phone';

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

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

Documentation

Find the full API reference on official documentation.

Changelog

v1.3.0 (2022-11-10)

• Add docs, fix box-sizing #6
• feat(docs): add docs subpackage, init docusaurus project 06c27c3
• imp(docs): update features list on docs website eafe3d4
• imp(docs): add usage examples to component apis 25a26c7