Phone-mask-uz NPM

📱 Phone Mask UZ

✨ Features

🎯 Automatic formatting for Uzbekistan phone numbers
✅ Built-in validation
🔄 Works with all UI libraries
🎨 Fully customizable
📦 Lightweight (< 5KB)
💪 Written in TypeScript
⚡ Easy to use

🚀 Installation

npm install phone-mask-uz

# Yarn
yarn add phone-mask-uz

# pnpm
pnpm add phone-mask-uz

💻 Usage

1️⃣ Basic Example

import PhoneNumber from 'phone-mask-uz';

function App() {
  const [phone, setPhone] = useState('');
  
  return (
    <PhoneNumber
      value={phone}
      onChange={(value, isValid) => setPhone(value)}
      placeholder="+998 __ ___ __ __"
    />
  );
}

2️⃣ With Ant Design

import PhoneNumber from 'phone-mask-uz';
import { Form, Input } from 'antd';

function App() {
  const [form] = Form.useForm();

  return (
    <Form form={form}>
      <Form.Item name="phone">
        <PhoneNumber
          inputComponent={Input}
          inputProps={{ size: 'large' }}
        />
      </Form.Item>
    </Form>
  );
}

Material-UI

import PhoneNumber from 'phone-mask-uz';
import { TextField } from '@mui/material';

function App() {
  return (
    <PhoneNumber
      inputComponent={TextField}
      inputProps={{ variant: 'outlined' }}
    />
  );
}

Chakra UI

import PhoneNumber from 'phone-mask-uz';
import { Input } from '@chakra-ui/react';

function App() {
  return (
    <PhoneNumber
      inputComponent={Input}
    />
  );
}

🎛 Props

Essential Props

Prop	Type	Default	Description
value	string	''	Input value
onChange	(value: string, isValid: boolean) => void	-	Callback when value changes
placeholder	string	'+998 _ __ __'	Input placeholder text

Prop	Type	Default	Description
error	string \| boolean	-	Error message or state
showError	boolean	true	Show error state
inputComponent	React.ComponentType	-	Custom input component (Antd Input, MUI TextField)
inputProps	object	{}	Props for input component
wrapperComponent	React.ComponentType	-	Wrapper component
wrapperProps	object	{}	Props for wrapper component
disabled	boolean	false	Disable input
className	string	''	CSS class

🛠 Utility Functions

import { normalizePhoneNumber, isValidPhoneNumber } from 'phone-mask-uz';

// Format phone number
normalizePhoneNumber('998901234567'); // '+998 90 123 45 67'

// Validate phone number
isValidPhoneNumber('+998 90 123 45 67'); // true