npm-quality-score-test-1
TypeScript icon, indicating that this package has built-in type declarations

1.7.14 • Public • Published

react-international-phone

🤙 International phone input component for React

npm-version build-status-badge install-size-badge codecov downloads

Live demo: Storybook

demo-gif

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
        initialCountry="ua"
        value={phone}
        onChange={(phone) => setPhone(phone)}
      />
    </div>
  );
};

Documentation

Find the full API reference on official documentation.

Readme

Keywords

Package Sidebar

Install

npm i npm-quality-score-test-1

Weekly Downloads

53

Version

1.7.14

License

MIT

Unpacked Size

136 kB

Total Files

44

Last publish

Collaborators

  • goveo