persian-number-input 3.0.3 → 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 +85 -66
  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 +1 -1
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,54 +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
- ### 🌟 حمایت از پروژه
76
+ ### ❓ FAQ (Frequently Asked Questions)
73
77
 
74
- اگر این پکیج برای شما مفید بود، **لطفاً یک ستاره به مخزن GitHub بدهید ⭐**. این بهترین راه برای حمایت از پروژه و تشویق توسعه‌دهنده به بهبود آن است.
78
+ **Does this package support React 19?**
79
+ Yes, it fully supports React versions 16 through 19.
80
+
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.
83
+
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.
86
+
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.
75
92
 
76
93
  👉 **[GitHub Repository](https://github.com/javadSharifi/persian-number-input)**
77
94
 
78
- از حمایت شما متشکریم! ❤️🚀
95
+ Thank you for your support! ❤️🚀
79
96
 
80
- ## 🇺🇸 English
97
+ ---
81
98
 
82
- React component to input numbers in Persian, Indic, or English with customizable digit separators and full localization.
99
+ ### 📈 SEO Keywords
83
100
 
84
- ✅ **Key Features:**
101
+ `Persian Number Input`, `React Persian input`, `localization`, `digit grouping`, `Persian digits`, `React numeric input`, `number formatter`
85
102
 
86
- - Support for Persian, English, and Indic digits
87
- - Customizable digit grouping separators
88
- - Automatically converts localized digits to English
89
- - Easy-to-use API supporting React versions 16 to 19
103
+ ---
90
104
 
91
- ### 🚀 Installation
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
+ ### 🚀 نصب
92
125
 
93
126
  ```bash
94
127
  npm install persian-number-input
95
128
  ```
96
129
 
97
- ### 💻 Usage Example
130
+ ### 💻 روش استفاده
98
131
 
99
- Simple usage:
132
+ مثال ساده:
100
133
 
101
134
  ```jsx
102
135
  import React, { useState } from "react";
@@ -118,44 +151,30 @@ const App = () => {
118
151
  export default App;
119
152
  ```
120
153
 
121
- ### 🔥 Output Example
154
+ ### 🔥 مثال خروجی
122
155
 
123
156
  ```
124
- Input: 123456
125
- Displayed Output: ۱۲۳,۴۵۶
126
- English Output: 123456
157
+ ورودی: 123456
158
+ خروجی نمایشی: ۱۲۳,۴۵۶
159
+ خروجی انگلیسی: 123456
127
160
  ```
128
161
 
129
- ### 📚 Props Reference
130
-
131
- | Name | Type | Default | Description |
132
- | -------------- | ------------------------------- | ------- | ------------------------------------ |
133
- | initialValue | string | "" | Initial input value |
134
- | separatorCount | number | 0 | Number of digits per group (e.g., 3) |
135
- | separatorChar | string | "," | Digit grouping character |
136
- | lang | 'fa' \| 'in' \| 'en' | "fa" | Digit localization language |
137
- | onChangeValue | (englishNumber: string) => void | - | Callback function on value change |
138
-
139
- ### 🌟 Support the Project
140
-
141
- If you found this package useful, **please consider giving a star ⭐ on GitHub**. It's the best way to support the project and encourage further improvements.
142
-
143
- 👉 **[GitHub Repository](https://github.com/javadSharifi/persian-number-input)**
144
-
145
- Thank you for your support! ❤️🚀
146
-
147
- ---
148
-
149
- ### 📈 SEO Keywords
162
+ ### 📚 مشخصات Props
150
163
 
151
- `Persian Number Input`, `React Persian input`, `localization`, `digit grouping`, `Persian digits`, `React numeric input`, `number formatter`
164
+ | نام | نوع | پیشفرض | توضیح |
165
+ | -------------- | ------------------------------- | ------ | -------------------------------- |
166
+ | initialValue | string | "" | مقدار اولیه |
167
+ | separatorCount | number | 0 | تعداد ارقام جداشده (مثلاً ۳ رقم) |
168
+ | separatorChar | string | "," | کاراکتر جداکننده (مانند `,`) |
169
+ | lang | 'fa' \| 'in' \| 'en' | "fa" | زبان نمایش ارقام |
170
+ | onChangeValue | (englishNumber: string) => void | - | فراخوانی در تغییر مقدار |
152
171
 
153
172
  ---
154
173
 
155
- ### 📄 License
174
+ ### 🌟 حمایت از پروژه
156
175
 
157
- [MIT License](LICENSE)
176
+ اگر این پکیج برای شما مفید بود، **لطفاً یک ستاره به مخزن GitHub بدهید ⭐**. این بهترین راه برای حمایت از پروژه و تشویق توسعه‌دهنده به بهبود آن است.
158
177
 
159
- © 2024 Your Name. All rights reserved.
178
+ 👉 **[GitHub Repository](https://github.com/javadSharifi/persian-number-input)**
160
179
 
161
- # persian-number-input
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": "3.0.3",
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",