react-international-phone
☎️ International phone input component for React
パッケージを検索...
react-international-phone類似パッケージ:
npmのダウンロードトレンド
3 年
Cumulative GitHub Star Trend
統計詳細
人気の比較
react-international-phone
react-international-phone のREADME
react-international-phone
🤙 International phone input component for React
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.
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