📱 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

✅ Validation

• Must start with +998
• Must be exactly 12 digits
• Validation state returned through onChange callback

🎨 Formatting

Number format: +998 XX XXX XX XX

Example:

• Input: 998901234567
• Result: +998 90 123 45 67

🌐 Browser Support

• Google Chrome
• Mozilla Firefox
• Safari
• Microsoft Edge

🤝 Contributing

Contributions are welcome! Feel free to submit a Pull Request.

📄 License

MIT