npmpackage.info

Gathering detailed insights and metrics for react-international-phone

Other packages similar to react-international-phone

react-phone-number-input

3.4.11

Telephone number input React component

react-phone-input-2

2.15.1

A react component to format phone numbers

react-international-phone-number-input

1.2.5

react-international-phone-field

4.0.8

☎️ International phone input component for React

react-international-phone

☎️ International phone input component for React

4.5.0

334

MIT

TypeScript

9.17 kB

6,246,866

Installations

npm install react-international-phone

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Node Version

20.18.0

NPM Version

10.8.2 Score

97.4

Supply Chain

89.5

Quality

87.7

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

11

Total

109

Closed

7

Merged

91

Issues

Open

31

Total

89

Closed

58

Releases

v4.5.0

Published on 18 Jan 2025

v4.4.0

Published on 16 Dec 2024

v4.3.0

Published on 18 May 2024

v4.2.9

Published on 29 Apr 2024

v4.2.8

Published on 20 Apr 2024

v4.2.7

Published on 15 Apr 2024

View all 63 releases

Contributors

Unable to fetch Contributors

View all 13 contributors

Languages

TypeScript

SCSS

JavaScript

CSS

HTML

Shell

TypeScript (92.98%)

SCSS (3.34%)

JavaScript (2.88%)

CSS (0.63%)

HTML (0.1%)

Shell (0.06%)

Developer

ybrusentsov

Download Statistics

Total Downloads

6,246,866

Last Day

35,069

Last Week

148,692

Last Month

654,795

Last Year

5,636,886

GitHub Statistics

334 Stars

594 Commits

60 Forks

2 Watching

2 Branches

13 Contributors

Bundle Size

25.44 kB

Minified

9.17 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

4.5.0

Package Id

react-international-phone@4.5.0

Unpacked Size

100.46 kB

Size

32.23 kB

File Count

NPM Version

10.8.2

Node Version

20.18.0

Publised On

18 Jan 2025

Total Downloads

Cumulative downloads

Total Downloads

6,246,866

Last day

-3%

35,069

Compared to previous day

Last week

-12.7%

148,692

Compared to previous week

Last month

7.9%

654,795

Compared to previous month

Last year

826.9%

5,636,886

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react

Dev Dependencies

@chakra-ui/react @commitlint/cli @commitlint/config-conventional @emotion/react @emotion/styled @mui/material @playwright/test @semantic-release/changelog @semantic-release/commit-analyzer @semantic-release/git @semantic-release/github @semantic-release/npm @semantic-release/release-notes-generator @storybook/addon-controls @storybook/addon-interactions @storybook/jest @storybook/preset-scss @storybook/react @storybook/react-vite @storybook/test-runner @storybook/testing-library @swc/core @testing-library/jest-dom @testing-library/react @testing-library/user-event @types/google-libphonenumber @types/jest @types/node @types/react @types/testing-library__jest-dom @typescript-eslint/eslint-plugin @typescript-eslint/parser antd commitizen cz-conventional-changelog esbuild-sass-plugin eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-simple-import-sort formik framer-motion google-libphonenumber husky identity-obj-proxy jest jest-environment-jsdom lint-staged postcss postcss-scss prettier react react-dom react-hook-form sass semantic-release storybook stylelint stylelint-config-idiomatic-order stylelint-config-prettier stylelint-config-standard stylelint-config-standard-scss stylelint-order stylelint-prettier stylelint-scss ts-jest ts-loader ts-node tsup typescript yup

Versions

react-international-phone

🤙 International phone input component for React

npm-version build-status-badge install-size-badge 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

1$ npm i react-international-phone

Basic usage

1import { useState } from 'react';
2import { PhoneInput } from 'react-international-phone';
3import 'react-international-phone/style.css';
4
5const App = () => {
6  const [phone, setPhone] = useState('');
7
8  return (
9    <div>
10      <PhoneInput
11        defaultCountry="ua"
12        value={phone}
13        onChange={(phone) => setPhone(phone)}
14      />
15    </div>
16  );
17};

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

No vulnerabilities found.

No security vulnerabilities found.