react-international-phone
Version:
āļø International phone input component for React
69 lines (51 loc) ā¢ 2.88 kB
Markdown
# react-international-phone
š¤ International phone input component for React
[](https://codecov.io/gh/ybrusentsov/react-international-phone)
[](https://github.com/ybrusentsov/react-international-phone)
[Live demo: Storybook](https://react-international-phone-storybook.vercel.app)
## 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](https://twemoji.twitter.com/).
- āØ **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
```sh
$ npm i react-international-phone
```
## Basic usage
```tsx
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](https://react-international-phone-docs.vercel.app/).
## 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:
<br/>
[Update from v3 to v4](https://react-international-phone-docs.vercel.app/docs/Migrations/migrate-to-v4)
<br/>
[Update from v2 to v3](https://react-international-phone-docs.vercel.app/docs/Migrations/migrate-to-v3)
<br/>
[Update from v1 to v2](https://react-international-phone-docs.vercel.app/docs/Migrations/migrate-to-v2)