persian-number-input 1.0.2 → 3.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +90 -53
  2. package/dist/components/PersianNumberInput.d.ts +1 -1
  3. package/dist/components/PersianNumberInput.js +3 -5
  4. package/dist/utils/digitUtils.d.ts +1 -1
  5. package/package.json +4 -4
package/README.md CHANGED
@@ -4,30 +4,32 @@
4
4
 
5
5
  ---
6
6
 
7
- [فارسی 🇮🇷](#-فارسی) | [English 🇺🇸](#-english)
7
+ [English 🇺🇸](#-english)| [فارسی 🇮🇷](#-فارسی)
8
8
 
9
9
  ---
10
10
 
11
- ## 🇮🇷 فارسی
11
+ ## 🇺🇸 English
12
12
 
13
- کامپوننت React برای ورودی اعداد فارسی، انگلیسی و هندی با قابلیت جداکننده ارقام و محلی‌سازی کامل.
13
+ Persian Number Input - React Component for Persian, English & Indic Number Formatting
14
14
 
15
- ✅ **امکانات کلیدی:**
15
+ Easily input, format, and convert numbers in Persian, English, or Indic digits with customizable digit separators. Lightweight, React-compatible, and fully localized for React versions 16 to 19.
16
16
 
17
- - پشتیبانی از اعداد فارسی، انگلیسی و هندی
18
- - قابلیت تعیین جداکننده ارقام دلخواه (هزارگان)
19
- - تبدیل خودکار اعداد محلی به اعداد انگلیسی
20
- - استفاده آسان و پشتیبانی از React نسخه‌های 16 تا 19
17
+ ✅ **Key Features:**
21
18
 
22
- ### 🚀 نصب
19
+ - Support for Persian, English, and Indic digit localization
20
+ - Customizable digit grouping separators (e.g., commas)
21
+ - Automatically converts localized digits to standard English digits
22
+ - Simple, easy-to-integrate React API
23
+
24
+ ### 🚀 Installation
23
25
 
24
26
  ```bash
25
27
  npm install persian-number-input
26
28
  ```
27
29
 
28
- ### 💻 روش استفاده
30
+ ### 💻 Usage Example
29
31
 
30
- مثال ساده:
32
+ Simple usage example:
31
33
 
32
34
  ```jsx
33
35
  import React, { useState } from "react";
@@ -49,46 +51,85 @@ const App = () => {
49
51
  export default App;
50
52
  ```
51
53
 
52
- ### 🔥 مثال خروجی
54
+ ### 🔥 Output Example
53
55
 
54
56
  ```
55
- ورودی: 123456
56
- خروجی نمایشی: ۱۲۳,۴۵۶
57
- خروجی انگلیسی: 123456
57
+ Input: 123456
58
+ Displayed Output: ۱۲۳,۴۵۶
59
+ English Output: 123456
58
60
  ```
59
61
 
60
- ### 📚 مشخصات Props
62
+ ![Output Example](https://your-domain.com/output-example.png)
61
63
 
62
- | نام | نوع | پیشفرض | توضیح |
63
- | -------------- | ------------------------------- | ------ | -------------------------------- |
64
- | initialValue | string | "" | مقدار اولیه |
65
- | separatorCount | number | 0 | تعداد ارقام جداشده (مثلاً ۳ رقم) |
66
- | separatorChar | string | "," | کاراکتر جداکننده (مانند `,`) |
67
- | lang | 'fa' \| 'in' \| 'en' | "fa" | زبان نمایش ارقام |
68
- | onChangeValue | (englishNumber: string) => void | - | فراخوانی در تغییر مقدار |
64
+ ### 📚 Props Reference
65
+
66
+ | Name | Type | Default | Description |
67
+ | -------------- | ------------------------------- | ------- | ------------------------------------ |
68
+ | initialValue | string | "" | Initial input value |
69
+ | separatorCount | number | 0 | Number of digits per group (e.g., 3) |
70
+ | separatorChar | string | "," | Digit grouping character |
71
+ | lang | 'fa' \| 'in' \| 'en' | "fa" | Digit localization language |
72
+ | onChangeValue | (englishNumber: string) => void | - | Callback function on value change |
69
73
 
70
74
  ---
71
75
 
72
- ## 🇺🇸 English
76
+ ### ❓ FAQ (Frequently Asked Questions)
73
77
 
74
- React component to input numbers in Persian, Indic, or English with customizable digit separators and full localization.
78
+ **Does this package support React 19?**
79
+ Yes, it fully supports React versions 16 through 19.
75
80
 
76
- ✅ **Key Features:**
81
+ **What is the best use-case scenario for this component?**
82
+ Ideal for multilingual web applications, forms, and any interface requiring localized numeric inputs.
77
83
 
78
- - Support for Persian, English, and Indic digits
79
- - Customizable digit grouping separators
80
- - Automatically converts localized digits to English
81
- - Easy-to-use API supporting React versions 16 to 19
84
+ **How can I customize the styles of this component?**
85
+ You can pass custom classes or inline styles directly to the component to match your design requirements.
82
86
 
83
- ### 🚀 Installation
87
+ ---
88
+
89
+ ### 🌟 Support the Project
90
+
91
+ If you find this package helpful, **please give it a star ⭐ on GitHub** to encourage further improvements.
92
+
93
+ 👉 **[GitHub Repository](https://github.com/javadSharifi/persian-number-input)**
94
+
95
+ Thank you for your support! ❤️🚀
96
+
97
+ ---
98
+
99
+ ### 📈 SEO Keywords
100
+
101
+ `Persian Number Input`, `React Persian input`, `localization`, `digit grouping`, `Persian digits`, `React numeric input`, `number formatter`
102
+
103
+ ---
104
+
105
+ ### 📄 License
106
+
107
+ [MIT License](LICENSE)
108
+
109
+ © 2024 Your Name. All rights reserved.
110
+
111
+ # persian-number-input
112
+
113
+ ## 🇮🇷 فارسی
114
+
115
+ کامپوننت React برای ورودی اعداد فارسی، انگلیسی و هندی با قابلیت جداکننده ارقام و محلی‌سازی کامل.
116
+
117
+ ✅ **امکانات کلیدی:**
118
+
119
+ - پشتیبانی از اعداد فارسی، انگلیسی و هندی
120
+ - قابلیت تعیین جداکننده ارقام دلخواه (هزارگان)
121
+ - تبدیل خودکار اعداد محلی به اعداد انگلیسی
122
+ - استفاده آسان و پشتیبانی از React نسخه‌های 16 تا 19
123
+
124
+ ### 🚀 نصب
84
125
 
85
126
  ```bash
86
127
  npm install persian-number-input
87
128
  ```
88
129
 
89
- ### 💻 Usage Example
130
+ ### 💻 روش استفاده
90
131
 
91
- Simple usage:
132
+ مثال ساده:
92
133
 
93
134
  ```jsx
94
135
  import React, { useState } from "react";
@@ -110,34 +151,30 @@ const App = () => {
110
151
  export default App;
111
152
  ```
112
153
 
113
- ### 🔥 Output Example
154
+ ### 🔥 مثال خروجی
114
155
 
115
156
  ```
116
- Input: 123456
117
- Displayed Output: ۱۲۳,۴۵۶
118
- English Output: 123456
157
+ ورودی: 123456
158
+ خروجی نمایشی: ۱۲۳,۴۵۶
159
+ خروجی انگلیسی: 123456
119
160
  ```
120
161
 
121
- ### 📚 Props Reference
162
+ ### 📚 مشخصات Props
122
163
 
123
- | Name | Type | Default | Description |
124
- | -------------- | ------------------------------- | ------- | ------------------------------------ |
125
- | initialValue | string | "" | Initial input value |
126
- | separatorCount | number | 0 | Number of digits per group (e.g., 3) |
127
- | separatorChar | string | "," | Digit grouping character |
128
- | lang | 'fa' \| 'in' \| 'en' | "fa" | Digit localization language |
129
- | onChangeValue | (englishNumber: string) => void | - | Callback function on value change |
164
+ | نام | نوع | پیشفرض | توضیح |
165
+ | -------------- | ------------------------------- | ------ | -------------------------------- |
166
+ | initialValue | string | "" | مقدار اولیه |
167
+ | separatorCount | number | 0 | تعداد ارقام جداشده (مثلاً ۳ رقم) |
168
+ | separatorChar | string | "," | کاراکتر جداکننده (مانند `,`) |
169
+ | lang | 'fa' \| 'in' \| 'en' | "fa" | زبان نمایش ارقام |
170
+ | onChangeValue | (englishNumber: string) => void | - | فراخوانی در تغییر مقدار |
130
171
 
131
172
  ---
132
173
 
133
- ### 📈 SEO Keywords
174
+ ### 🌟 حمایت از پروژه
134
175
 
135
- `Persian Number Input`, `React Persian input`, `localization`, `digit grouping`, `Persian digits`, `React numeric input`, `number formatter`
176
+ اگر این پکیج برای شما مفید بود، **لطفاً یک ستاره به مخزن GitHub بدهید ⭐**. این بهترین راه برای حمایت از پروژه و تشویق توسعه‌دهنده به بهبود آن است.
136
177
 
137
- ---
138
-
139
- ### 📄 License
178
+ 👉 **[GitHub Repository](https://github.com/javadSharifi/persian-number-input)**
140
179
 
141
- [MIT License](LICENSE)
142
-
143
- © 2024 Your Name. All rights reserved.
180
+ از حمایت شما متشکریم! ❤️🚀
package/dist/components/PersianNumberInput.d.ts CHANGED
@@ -3,7 +3,7 @@ export interface PersianNumberInputProps extends React.InputHTMLAttributes<HTMLI
3
3
  initialValue?: string;
4
4
  separatorCount?: number;
5
5
  separatorChar?: string;
6
- lang?: 'fa' | 'in' | 'en';
6
+ lang?: 'fa-ar' | 'in' | 'en';
7
7
  onChangeValue?: (englishNumber: string) => void;
8
8
  }
9
9
  declare const PersianNumberInput: React.FC<PersianNumberInputProps>;
package/dist/components/PersianNumberInput.js CHANGED
@@ -12,16 +12,14 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  import React, { useCallback } from 'react';
13
13
  import { toLocalizedDigits, groupDigits, convertToEnglishDigits } from '../utils/digitUtils';
14
14
  const PersianNumberInput = (_a) => {
15
- var { initialValue = '', separatorCount = 0, separatorChar = ',', lang = 'fa', onChangeValue } = _a, rest = __rest(_a, ["initialValue", "separatorCount", "separatorChar", "lang", "onChangeValue"]);
16
- const [value, setValue] = React.useState(() => convertToEnglishDigits(initialValue).replace(/\D/g, ''));
15
+ var { initialValue = '', separatorCount = 0, separatorChar = ',', lang = 'fa-ar', onChangeValue } = _a, rest = __rest(_a, ["initialValue", "separatorCount", "separatorChar", "lang", "onChangeValue"]);
17
16
  const handleChange = useCallback((e) => {
18
17
  const input = convertToEnglishDigits(e.target.value).replace(/\D/g, '');
19
- setValue(input);
20
18
  if (onChangeValue)
21
19
  onChangeValue(input);
22
20
  }, [onChangeValue]);
23
- const formattedValue = groupDigits(value, separatorCount, separatorChar);
21
+ const formattedValue = groupDigits(convertToEnglishDigits(initialValue).replace(/\D/g, ''), separatorCount, separatorChar);
24
22
  const displayValue = lang === 'en' ? formattedValue : toLocalizedDigits(formattedValue, lang);
25
- return React.createElement("input", Object.assign({}, rest, { value: displayValue, onChange: handleChange }));
23
+ return React.createElement("input", Object.assign({}, rest, { defaultValue: displayValue, onChange: handleChange }));
26
24
  };
27
25
  export default PersianNumberInput;
package/dist/utils/digitUtils.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export declare const digitsMap: {
2
2
  [key: string]: string[];
3
3
  };
4
- export declare const toLocalizedDigits: (numStr: string, locale: "fa" | "in") => string;
4
+ export declare const toLocalizedDigits: (numStr: string, locale: "fa-ar" | "in" | "en") => string;
5
5
  export declare const groupDigits: (numStr: string, separatorCount: number, separatorChar?: string) => string;
6
6
  export declare const convertToEnglishDigits: (str: string) => string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "persian-number-input",
3
- "version": "1.0.2",
3
+ "version": "3.0.4",
4
4
  "description": "React component for Persian, Indic, or English localized number input with customizable digit grouping",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -25,12 +25,12 @@
25
25
  "license": "MIT",
26
26
  "repository": {
27
27
  "type": "git",
28
- "url": "https://github.com/yourusername/persian-number-input.git"
28
+ "url": "https://github.com/javadSharifi/persian-number-input"
29
29
  },
30
30
  "bugs": {
31
- "url": "https://github.com/yourusername/persian-number-input/issues"
31
+ "url": "https://github.com/javadSharifi/persian-number-input/issues"
32
32
  },
33
- "homepage": "https://github.com/yourusername/persian-number-input#readme",
33
+ "homepage": "https://github.com/javadSharifi/persian-number-input#readme",
34
34
  "peerDependencies": {
35
35
  "react": "^16.8 || ^17 || ^18 || ^19"
36
36
  },