use-mask-input 3.5.2 → 3.6.1
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.
- package/CHANGELOG.md +52 -74
- package/README.md +2 -251
- package/dist/index.cjs +1067 -1146
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +52 -11
- package/dist/index.d.ts +52 -11
- package/dist/index.js +1068 -1147
- package/dist/index.js.map +1 -1
- package/package.json +22 -22
- package/src/api/index.ts +4 -0
- package/src/api/useHookFormMask.spec.ts +146 -0
- package/src/api/useHookFormMask.ts +56 -0
- package/src/api/useMaskInput-server.spec.tsx +30 -0
- package/src/api/useMaskInput.spec.tsx +220 -0
- package/src/api/useMaskInput.ts +64 -0
- package/src/api/withHookFormMask.spec.ts +155 -0
- package/src/api/withHookFormMask.ts +54 -0
- package/src/api/withMask.spec.ts +93 -0
- package/src/api/withMask.ts +25 -0
- package/src/core/elementResolver.spec.ts +175 -0
- package/src/core/elementResolver.ts +84 -0
- package/src/core/index.ts +3 -0
- package/src/core/maskConfig.spec.ts +183 -0
- package/src/{utils/getMaskOptions.ts → core/maskConfig.ts} +13 -4
- package/src/core/maskEngine.spec.ts +108 -0
- package/src/core/maskEngine.ts +47 -0
- package/src/index.tsx +12 -5
- package/src/{types.ts → types/index.ts} +13 -0
- package/src/utils/flow.spec.ts +27 -30
- package/src/utils/flow.ts +2 -2
- package/src/utils/index.ts +1 -1
- package/src/utils/isServer.spec.ts +15 -0
- package/src/utils/moduleInterop.spec.ts +37 -0
- package/src/useHookFormMask.ts +0 -47
- package/src/useMaskInput.ts +0 -41
- package/src/utils/getMaskOptions.spec.ts +0 -126
- package/src/withHookFormMask.ts +0 -34
- package/src/withMask.ts +0 -18
- /package/src/{inputmask.types.ts → types/inputmask.types.ts} +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,237 +1,215 @@
|
|
|
1
|
-
## [3.
|
|
1
|
+
## [3.6.0](https://github.com/eduardoborges/use-mask-input/compare/3.5.2...3.6.0) (2026-01-13)
|
|
2
|
+
|
|
3
|
+
## 3.6.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 98e52be: enhance form handling with react-hook-form integration, add new dependencies, and update TypeScript configuration
|
|
8
|
+
|
|
9
|
+
### Features
|
|
2
10
|
|
|
11
|
+
- add support to alphanumerial brazilian & update inputmask cnpj ([#145](https://github.com/eduardoborges/use-mask-input/issues/145)) ([64dbc92](https://github.com/eduardoborges/use-mask-input/commit/64dbc9256af8b16461acbacf1c574e43f6cf195a))
|
|
12
|
+
|
|
13
|
+
## [3.5.2](https://github.com/eduardoborges/use-mask-input/compare/3.5.1...3.5.2) (2025-09-24)
|
|
3
14
|
|
|
4
15
|
### Bug Fixes
|
|
5
16
|
|
|
6
|
-
|
|
17
|
+
- add .node-version file and refactor types and withMask function for improved type handling ([9f34a7b](https://github.com/eduardoborges/use-mask-input/commit/9f34a7bb6a1ed721efb04ffe53ea12bbd8102227))
|
|
7
18
|
|
|
8
19
|
## [3.5.1](https://github.com/eduardoborges/use-mask-input/compare/3.5.0...3.5.1) (2025-09-05)
|
|
9
20
|
|
|
10
|
-
|
|
11
21
|
### Bug Fixes
|
|
12
22
|
|
|
13
|
-
|
|
23
|
+
- update ESLint configuration and dependencies, migrate from Rollup to TSUP for builds ([#130](https://github.com/eduardoborges/use-mask-input/issues/130)) ([396ef79](https://github.com/eduardoborges/use-mask-input/commit/396ef798055cac34df45649a16ee010af6229d5c))
|
|
14
24
|
|
|
15
25
|
# [3.5.0](https://github.com/eduardoborges/use-mask-input/compare/3.4.2...3.5.0) (2025-07-14)
|
|
16
26
|
|
|
17
|
-
|
|
18
27
|
### Features
|
|
19
28
|
|
|
20
|
-
|
|
29
|
+
- Export types module for better TypeScript support ([#123](https://github.com/eduardoborges/use-mask-input/issues/123)) ([a4ee805](https://github.com/eduardoborges/use-mask-input/commit/a4ee805fa54490a11cd5f686fbf0fdf89f5761f4))
|
|
21
30
|
|
|
22
31
|
## [3.4.2](https://github.com/eduardoborges/use-mask-input/compare/3.4.1...3.4.2) (2024-11-22)
|
|
23
32
|
|
|
24
|
-
|
|
25
33
|
### Bug Fixes
|
|
26
34
|
|
|
27
|
-
|
|
35
|
+
- mui textfield disappearing ([#95](https://github.com/eduardoborges/use-mask-input/issues/95)) ([fa0caf6](https://github.com/eduardoborges/use-mask-input/commit/fa0caf66fe05f33e5a5aeaf3e92b38352ca46abb))
|
|
28
36
|
|
|
29
37
|
## [3.4.1](https://github.com/eduardoborges/use-mask-input/compare/3.4.0...3.4.1) (2024-11-22)
|
|
30
38
|
|
|
31
|
-
|
|
32
39
|
### Bug Fixes
|
|
33
40
|
|
|
34
|
-
|
|
35
|
-
|
|
41
|
+
- update inputmask to version 5.0.10-beta.11 ([#98](https://github.com/eduardoborges/use-mask-input/issues/98)) ([08a16a5](https://github.com/eduardoborges/use-mask-input/commit/08a16a5c947485729d1a88f15b1d812e68f95cee))
|
|
42
|
+
- update packages ([6a4fc39](https://github.com/eduardoborges/use-mask-input/commit/6a4fc3944fb6804a705454ecd513277fe359c621))
|
|
36
43
|
|
|
37
44
|
# [3.4.0](https://github.com/eduardoborges/use-mask-input/compare/3.3.8...3.4.0) (2024-07-23)
|
|
38
45
|
|
|
39
|
-
|
|
40
46
|
### Features
|
|
41
47
|
|
|
42
|
-
|
|
48
|
+
- update mask type to match the avaliable types. ([#88](https://github.com/eduardoborges/use-mask-input/issues/88)) ([2e17b79](https://github.com/eduardoborges/use-mask-input/commit/2e17b794ec2290dde1a911e632ee0090663602a7))
|
|
43
49
|
|
|
44
50
|
## [3.3.8](https://github.com/eduardoborges/use-mask-input/compare/3.3.7...3.3.8) (2024-06-18)
|
|
45
51
|
|
|
46
|
-
|
|
47
52
|
### Bug Fixes
|
|
48
53
|
|
|
49
|
-
|
|
54
|
+
- prepare withMask function to React 19 ref breaking changes ([#83](https://github.com/eduardoborges/use-mask-input/issues/83)) ([4756fe8](https://github.com/eduardoborges/use-mask-input/commit/4756fe807e29e6b2dfb54b5dc75c1667769de13f))
|
|
50
55
|
|
|
51
56
|
## [3.3.7](https://github.com/eduardoborges/use-mask-input/compare/3.3.6...3.3.7) (2023-11-09)
|
|
52
57
|
|
|
53
|
-
|
|
54
58
|
### Bug Fixes
|
|
55
59
|
|
|
56
|
-
|
|
60
|
+
- fix options spread in getMaskOptions function ([e857424](https://github.com/eduardoborges/use-mask-input/commit/e85742442a375f85edfd819475071b29b4bc0af8))
|
|
57
61
|
|
|
58
62
|
## [3.3.6](https://github.com/eduardoborges/use-mask-input/compare/3.3.5...3.3.6) (2023-10-02)
|
|
59
63
|
|
|
60
|
-
|
|
61
64
|
### Bug Fixes
|
|
62
65
|
|
|
63
|
-
|
|
66
|
+
- update dependencies ([a9b6deb](https://github.com/eduardoborges/use-mask-input/commit/a9b6deb977c0273390c6015f15249b9b2e82d738))
|
|
64
67
|
|
|
65
68
|
## [3.3.5](https://github.com/eduardoborges/use-mask-input/compare/3.3.4...3.3.5) (2023-08-30)
|
|
66
69
|
|
|
67
|
-
|
|
68
70
|
### Bug Fixes
|
|
69
71
|
|
|
70
|
-
|
|
72
|
+
- **types:** fix mask options with any type ([7b643b1](https://github.com/eduardoborges/use-mask-input/commit/7b643b1e6afc27ad4e49d5b528e31d1ff6427a8b))
|
|
71
73
|
|
|
72
74
|
## [3.3.4](https://github.com/eduardoborges/use-mask-input/compare/3.3.3...3.3.4) (2023-08-29)
|
|
73
75
|
|
|
74
|
-
|
|
75
76
|
### Bug Fixes
|
|
76
77
|
|
|
77
|
-
|
|
78
|
+
- types and options ([#50](https://github.com/eduardoborges/use-mask-input/issues/50)) ([3bc502e](https://github.com/eduardoborges/use-mask-input/commit/3bc502e770c3aa12c9b248904da57c016c35f6a2))
|
|
78
79
|
|
|
79
80
|
## [3.3.3](https://github.com/eduardoborges/use-mask-input/compare/3.3.2...3.3.3) (2023-08-14)
|
|
80
81
|
|
|
81
|
-
|
|
82
82
|
### Bug Fixes
|
|
83
83
|
|
|
84
|
-
|
|
84
|
+
- **scripts:** remove unused postinstall script ([4a62989](https://github.com/eduardoborges/use-mask-input/commit/4a6298991d02c16af3dcda3edcb8dae4b8874f8a))
|
|
85
85
|
|
|
86
86
|
## [3.3.2](https://github.com/eduardoborges/use-mask-input/compare/3.3.1...3.3.2) (2023-08-10)
|
|
87
87
|
|
|
88
|
-
|
|
89
88
|
### Bug Fixes
|
|
90
89
|
|
|
91
|
-
|
|
92
|
-
|
|
90
|
+
- **ci:** adjust ci to run on beta ([1aa0978](https://github.com/eduardoborges/use-mask-input/commit/1aa09789bf1fbe0b5a86703c6da186fd3854150f))
|
|
91
|
+
- fix Missing type=module in package.json [#44](https://github.com/eduardoborges/use-mask-input/issues/44) ([f193a20](https://github.com/eduardoborges/use-mask-input/commit/f193a2032572a43e3bde4220feffb9976d05bb2c))
|
|
93
92
|
|
|
94
93
|
## [3.3.2-beta.1](https://github.com/eduardoborges/use-mask-input/compare/3.3.1...3.3.2-beta.1) (2023-08-10)
|
|
95
94
|
|
|
96
|
-
|
|
97
95
|
### Bug Fixes
|
|
98
96
|
|
|
99
|
-
|
|
97
|
+
- fix Missing type=module in package.json [#44](https://github.com/eduardoborges/use-mask-input/issues/44) ([f193a20](https://github.com/eduardoborges/use-mask-input/commit/f193a2032572a43e3bde4220feffb9976d05bb2c))
|
|
100
98
|
|
|
101
99
|
## [3.3.1](https://github.com/eduardoborges/use-mask-input/compare/3.3.0...3.3.1) (2023-08-03)
|
|
102
100
|
|
|
103
|
-
|
|
104
101
|
### Bug Fixes
|
|
105
102
|
|
|
106
|
-
|
|
103
|
+
- **package.json:** add type module ([34faa1e](https://github.com/eduardoborges/use-mask-input/commit/34faa1e41ab27a5a18530988c4df51da6bacc3f5))
|
|
107
104
|
|
|
108
105
|
# [3.3.0](https://github.com/eduardoborges/use-mask-input/compare/3.2.0...3.3.0) (2023-06-30)
|
|
109
106
|
|
|
110
|
-
|
|
111
107
|
### Features
|
|
112
108
|
|
|
113
|
-
|
|
109
|
+
- new useHookFormMask API ([#35](https://github.com/eduardoborges/use-mask-input/issues/35)) ([52609eb](https://github.com/eduardoborges/use-mask-input/commit/52609eb57d77f4cd95a8ccbe868f9e4cbcdc2e47))
|
|
114
110
|
|
|
115
111
|
# [3.2.0](https://github.com/eduardoborges/use-mask-input/compare/3.1.2...3.2.0) (2023-06-14)
|
|
116
112
|
|
|
117
|
-
|
|
118
113
|
### Features
|
|
119
114
|
|
|
120
|
-
|
|
115
|
+
- now works with Next! ([7730de2](https://github.com/eduardoborges/use-mask-input/commit/7730de24237f8df0eede8cf464620b6d1c87c558))
|
|
121
116
|
|
|
122
117
|
## [3.1.2](https://github.com/eduardoborges/use-mask-input/compare/3.1.1...3.1.2) (2023-05-10)
|
|
123
118
|
|
|
124
|
-
|
|
125
119
|
### Bug Fixes
|
|
126
120
|
|
|
127
|
-
|
|
121
|
+
- add inputmask extension support ([eecc00a](https://github.com/eduardoborges/use-mask-input/commit/eecc00a0601ff5bc340c50886a6ab35174006096))
|
|
128
122
|
|
|
129
123
|
## [3.1.1](https://github.com/eduardoborges/use-mask-input/compare/3.1.0...3.1.1) (2023-05-10)
|
|
130
124
|
|
|
131
|
-
|
|
132
125
|
### Bug Fixes
|
|
133
126
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
127
|
+
- change dependency type ([#13](https://github.com/eduardoborges/use-mask-input/issues/13)) ([1c87dc7](https://github.com/eduardoborges/use-mask-input/commit/1c87dc723540cd51e1dc40f1a162611aa53e9c11))
|
|
128
|
+
- downgrade required node to 16 ([#11](https://github.com/eduardoborges/use-mask-input/issues/11)) ([d829d2f](https://github.com/eduardoborges/use-mask-input/commit/d829d2f5c34aa0b30ab6f68d42fbc5a068b53b70))
|
|
129
|
+
- regression issue with react hook form and ci ([#31](https://github.com/eduardoborges/use-mask-input/issues/31)) ([bf104b2](https://github.com/eduardoborges/use-mask-input/commit/bf104b2a1ca7ccb0b7a1d573ba07bdfe95dd8949)), closes [#11](https://github.com/eduardoborges/use-mask-input/issues/11) [#13](https://github.com/eduardoborges/use-mask-input/issues/13)
|
|
137
130
|
|
|
138
131
|
# [3.1.0](https://github.com/eduardoborges/use-mask-input/compare/3.0.6...3.1.0) (2023-05-04)
|
|
139
132
|
|
|
140
|
-
|
|
141
133
|
### Bug Fixes
|
|
142
134
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
135
|
+
- refactor code and add compose function to `utils.ts` ([49a7459](https://github.com/eduardoborges/use-mask-input/commit/49a7459c0976443f04426c2cc14d29172fe413ad))
|
|
136
|
+
- refactor withHookFormMask to use compose instead of flow. ([85b8bc5](https://github.com/eduardoborges/use-mask-input/commit/85b8bc59b112341ad76b09d7acc167c98d8bd352))
|
|
137
|
+
- small refactors, remove lodash dep and add exports suggar ([95286a8](https://github.com/eduardoborges/use-mask-input/commit/95286a87c4ea3c2bf0f25a418413078da9d17c7b))
|
|
147
138
|
|
|
148
139
|
### Features
|
|
149
140
|
|
|
150
|
-
|
|
141
|
+
- Add React Hook Form to dependencies and install git hooks ([f7496c2](https://github.com/eduardoborges/use-mask-input/commit/f7496c23a429363bc47e03f18c9ce8eb3be41ab0))
|
|
151
142
|
|
|
152
143
|
## [3.0.6](https://github.com/eduardoborges/use-mask-input/compare/3.0.5...3.0.6) (2023-02-10)
|
|
153
144
|
|
|
154
|
-
|
|
155
145
|
### Bug Fixes
|
|
156
146
|
|
|
157
|
-
|
|
147
|
+
- fix regression for cra exports ([b149d78](https://github.com/eduardoborges/use-mask-input/commit/b149d7822dac99db3f308671a13b8fbbe148010c))
|
|
158
148
|
|
|
159
149
|
## [3.0.5](https://github.com/eduardoborges/use-mask-input/compare/3.0.4...3.0.5) (2023-02-09)
|
|
160
150
|
|
|
161
|
-
|
|
162
151
|
### Bug Fixes
|
|
163
152
|
|
|
164
|
-
|
|
153
|
+
- fix module resolution ([ab8a464](https://github.com/eduardoborges/use-mask-input/commit/ab8a464a4cb6fe529d1ff3decc56de925efa68fc))
|
|
165
154
|
|
|
166
155
|
## [3.0.4](https://github.com/eduardoborges/use-mask-input/compare/3.0.3...3.0.4) (2023-02-09)
|
|
167
156
|
|
|
168
|
-
|
|
169
157
|
### Bug Fixes
|
|
170
158
|
|
|
171
|
-
|
|
159
|
+
- fix invalid resolve entry for package fix [#8](https://github.com/eduardoborges/use-mask-input/issues/8) ([91e3fc2](https://github.com/eduardoborges/use-mask-input/commit/91e3fc28b7180bbc6c608dd33eefd92d1c21da78))
|
|
172
160
|
|
|
173
161
|
## [3.0.3](https://github.com/eduardoborges/use-mask-input/compare/3.0.2...3.0.3) (2023-02-09)
|
|
174
162
|
|
|
175
|
-
|
|
176
163
|
### Bug Fixes
|
|
177
164
|
|
|
178
|
-
|
|
165
|
+
- can access nodeName on component unmount fix [#7](https://github.com/eduardoborges/use-mask-input/issues/7) ([a881272](https://github.com/eduardoborges/use-mask-input/commit/a881272be60b77287d68208472280c52331d82e7))
|
|
179
166
|
|
|
180
167
|
## [3.0.2](https://github.com/eduardoborges/use-mask-input/compare/3.0.1...3.0.2) (2023-02-06)
|
|
181
168
|
|
|
182
|
-
|
|
183
169
|
### Bug Fixes
|
|
184
170
|
|
|
185
|
-
|
|
171
|
+
- remove unused deps and fix vulnerabilities ([a49c5d5](https://github.com/eduardoborges/use-mask-input/commit/a49c5d55b485553fe9a79c38af900fc4def24774))
|
|
186
172
|
|
|
187
173
|
## [3.0.1](https://github.com/eduardoborges/use-mask-input/compare/3.0.0...3.0.1) (2023-01-23)
|
|
188
174
|
|
|
189
|
-
|
|
190
175
|
### Bug Fixes
|
|
191
176
|
|
|
192
|
-
|
|
177
|
+
- security fixes ([aad0816](https://github.com/eduardoborges/use-mask-input/commit/aad08168b9349a6199a3bfa0d1340a5f20cae732))
|
|
193
178
|
|
|
194
179
|
# [3.0.0](https://github.com/eduardoborges/use-mask-input/compare/2.1.0...3.0.0) (2022-10-11)
|
|
195
180
|
|
|
196
|
-
|
|
197
181
|
### Features
|
|
198
182
|
|
|
199
|
-
|
|
200
|
-
|
|
183
|
+
- simplify API & add react-final-form support. ([981588d](https://github.com/eduardoborges/use-mask-input/commit/981588d54121e66d550eb5df9fe64b5de01d70c6))
|
|
201
184
|
|
|
202
185
|
### BREAKING CHANGES
|
|
203
186
|
|
|
204
|
-
|
|
187
|
+
- update api
|
|
205
188
|
|
|
206
189
|
# [2.1.0](https://github.com/eduardoborges/use-mask-input/compare/2.0.1...2.1.0) (2022-09-27)
|
|
207
190
|
|
|
208
|
-
|
|
209
191
|
### Features
|
|
210
192
|
|
|
211
|
-
|
|
193
|
+
- add react-hook-form 7 integration ([0fd5bfc](https://github.com/eduardoborges/use-mask-input/commit/0fd5bfca4f8a686b9d89eba1f319c055073f51ed))
|
|
212
194
|
|
|
213
195
|
## [2.0.1](https://github.com/eduardoborges/use-mask-input/compare/2.0.0...2.0.1) (2022-09-27)
|
|
214
196
|
|
|
215
|
-
|
|
216
197
|
### Bug Fixes
|
|
217
198
|
|
|
218
|
-
|
|
199
|
+
- enhance actions time ([6ea226c](https://github.com/eduardoborges/use-mask-input/commit/6ea226cf1e49f46ff476ad7c1619c136a54a1954))
|
|
219
200
|
|
|
220
201
|
# [2.0.0](https://github.com/eduardoborges/use-mask-input/compare/1.1.0...2.0.0) (2022-09-27)
|
|
221
202
|
|
|
222
|
-
|
|
223
203
|
### Bug Fixes
|
|
224
204
|
|
|
225
|
-
|
|
226
|
-
|
|
205
|
+
- Bump version ([4485125](https://github.com/eduardoborges/use-mask-input/commit/44851258e0b9f767be53d77e279b3604578b8aaa))
|
|
227
206
|
|
|
228
207
|
### BREAKING CHANGES
|
|
229
208
|
|
|
230
|
-
|
|
209
|
+
- update libs to suport new react-hook-form
|
|
231
210
|
|
|
232
211
|
# [1.1.0](https://github.com/eduardoborges/use-mask-input/compare/1.0.2...1.1.0) (2022-09-27)
|
|
233
212
|
|
|
234
|
-
|
|
235
213
|
### Features
|
|
236
214
|
|
|
237
|
-
|
|
215
|
+
- force release ([61d23d3](https://github.com/eduardoborges/use-mask-input/commit/61d23d3f588abe095ec0a81de8249801c39a31bd))
|
package/README.md
CHANGED
|
@@ -3,22 +3,9 @@
|
|
|
3
3
|
<h4>A React Hook for building elegant and simple input masks.</h4>
|
|
4
4
|
|
|
5
5
|
  
|
|
6
|
-
|
|
7
6
|
</div>
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
## Table of Contents
|
|
11
|
-
|
|
12
|
-
- [Installation](#install)
|
|
13
|
-
- [Usage](#quickstart)
|
|
14
|
-
- [Masking Types](#masking-types)
|
|
15
|
-
- [Static Masking Type](#static-masking-type)
|
|
16
|
-
- [Optional Masking Type](#optional-masking-type)
|
|
17
|
-
- [Dynamic Masking Type](#dynamic-masking-type)
|
|
18
|
-
- [Alias Masking Type](#alias-masking-type)
|
|
19
|
-
- [Alternator Masking Type](#alias-masking-type)
|
|
20
|
-
- [Preprocessing Masking Type](#preprocessing-masking-type)
|
|
21
|
-
|
|
8
|
+
## [Full Documentation](http://use-mask-input.eduardoborges.dev) | [Sponsor this project](https://github.com/eduardoborges?tab=sponsors)
|
|
22
9
|
|
|
23
10
|
## Features
|
|
24
11
|
- 🎯 Simple API
|
|
@@ -35,7 +22,7 @@ npm i use-mask-input
|
|
|
35
22
|
|
|
36
23
|
```jsx
|
|
37
24
|
import React from 'react'
|
|
38
|
-
import {
|
|
25
|
+
import { useMaskInput } from 'use-mask-input';
|
|
39
26
|
|
|
40
27
|
const App = () => {
|
|
41
28
|
return (
|
|
@@ -70,239 +57,3 @@ function App() {
|
|
|
70
57
|
);
|
|
71
58
|
}
|
|
72
59
|
```
|
|
73
|
-
|
|
74
|
-
### Usage with React Final Form
|
|
75
|
-
|
|
76
|
-
Just use `withMask` normaly.
|
|
77
|
-
|
|
78
|
-
```jsx
|
|
79
|
-
import React from 'react';
|
|
80
|
-
import { Form, Field } from 'react-final-form';
|
|
81
|
-
import { withMask } from 'use-mask-input';
|
|
82
|
-
|
|
83
|
-
function App() {
|
|
84
|
-
...
|
|
85
|
-
return (
|
|
86
|
-
<Form
|
|
87
|
-
onSubmit={onSubmit}
|
|
88
|
-
render={({ handleSubmit }) => (
|
|
89
|
-
<form onSubmit={handleSubmit}>
|
|
90
|
-
<Field
|
|
91
|
-
name="phone"
|
|
92
|
-
render={({ input, meta }) => (
|
|
93
|
-
<input ref={withMask('9999-9999')} {...input} />
|
|
94
|
-
)}
|
|
95
|
-
/>
|
|
96
|
-
<button type="submit">Submit</button>
|
|
97
|
-
</form>
|
|
98
|
-
)}
|
|
99
|
-
/>
|
|
100
|
-
);
|
|
101
|
-
}
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
## Masking types
|
|
105
|
-
|
|
106
|
-
The `mask` params can be
|
|
107
|
-
|
|
108
|
-
### Static Masking Type
|
|
109
|
-
|
|
110
|
-
These are the very basics of masking. The mask is defined and will not change during the input.
|
|
111
|
-
|
|
112
|
-
```tsx
|
|
113
|
-
<input
|
|
114
|
-
{...registerWithMask("phone", '99 9999-9999')}
|
|
115
|
-
type="text"
|
|
116
|
-
/>
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
### Optional Masking Type
|
|
120
|
-
|
|
121
|
-
It is possible to define some parts in the mask as optional. This is done by using `[ ]`. By example:
|
|
122
|
-
|
|
123
|
-
```tsx
|
|
124
|
-
<input
|
|
125
|
-
{...registerWithMask("phone", '99 [9]9999-9999')}
|
|
126
|
-
type="text"
|
|
127
|
-
/>
|
|
128
|
-
```
|
|
129
|
-
This mask will allow input like (99) 99999-9999 or (99) 9999-9999.
|
|
130
|
-
|
|
131
|
-
### Dynamic Masking Type
|
|
132
|
-
|
|
133
|
-
Dynamic masks can change during input. To define a dynamic part use { }.
|
|
134
|
-
|
|
135
|
-
{n} => n repeats {n|j} => n repeats, with j jitmasking {n,m} => from n to m repeats {n,m|j} => from n to m repeats, with j jitmasking
|
|
136
|
-
|
|
137
|
-
Also {+} and {} is allowed. + start from 1 and start from 0.
|
|
138
|
-
|
|
139
|
-
By example:
|
|
140
|
-
|
|
141
|
-
```tsx
|
|
142
|
-
//static mask with dynamic syntax
|
|
143
|
-
<input
|
|
144
|
-
{...registerWithMask("phone", "aa-9{4}")}
|
|
145
|
-
type="text"
|
|
146
|
-
/>
|
|
147
|
-
|
|
148
|
-
// dynamic mask ~ the 9 def can be occur 1 to 4 times
|
|
149
|
-
<input
|
|
150
|
-
{...registerWithMask("phone", "aa-9{4}")}
|
|
151
|
-
type="text"
|
|
152
|
-
/>
|
|
153
|
-
|
|
154
|
-
// dynamic mask ~ email
|
|
155
|
-
<input
|
|
156
|
-
{...registerWithMask("phone", "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]")}
|
|
157
|
-
type="text"
|
|
158
|
-
/>
|
|
159
|
-
|
|
160
|
-
```
|
|
161
|
-
### Alias Masking Type
|
|
162
|
-
|
|
163
|
-
A Lot of common default "aliases" presets, you can use like that:
|
|
164
|
-
```tsx
|
|
165
|
-
<input // the alias
|
|
166
|
-
{...registerWithMask("date", "datetime", {
|
|
167
|
-
inputFormat: "yyyy-mm-dd",
|
|
168
|
-
})}
|
|
169
|
-
type="text"
|
|
170
|
-
/>
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
You can use together with options like `inputFormat`, `prefix`, `suffix`, etc. Checkout [API docs](#api)
|
|
174
|
-
|
|
175
|
-
The avaliable ones is:
|
|
176
|
-
|
|
177
|
-
- `datetime`
|
|
178
|
-
- `email`
|
|
179
|
-
- `ip`
|
|
180
|
-
- `datetime`
|
|
181
|
-
- `cpf`
|
|
182
|
-
- `email`
|
|
183
|
-
- `numeric`
|
|
184
|
-
- `currency`
|
|
185
|
-
- `decimal`
|
|
186
|
-
- `integer`
|
|
187
|
-
- `percentage`
|
|
188
|
-
- `url`
|
|
189
|
-
- `ip`
|
|
190
|
-
- `mac`
|
|
191
|
-
- `ssn`
|
|
192
|
-
|
|
193
|
-
### Alternator Masking Type
|
|
194
|
-
|
|
195
|
-
The alternator syntax is like an OR statement. The mask can be one of the 3 choices specified in the alternator.
|
|
196
|
-
|
|
197
|
-
To define an alternator use the |. ex: "a|9" => a or 9 "(aaa)|(999)" => aaa or 999 "(aaa|999|9AA)" => aaa or 999 or 9AA
|
|
198
|
-
"aaaa|9999" => aaa a or 9 999
|
|
199
|
-
|
|
200
|
-
```tsx
|
|
201
|
-
<input
|
|
202
|
-
{...registerWithMask("phone", "9999-9999|99999-9999")}
|
|
203
|
-
type="text"
|
|
204
|
-
/>
|
|
205
|
-
|
|
206
|
-
// or just passing an array
|
|
207
|
-
<input
|
|
208
|
-
{...registerWithMask("phone", ["9999-9999", "99999-9999"])}
|
|
209
|
-
type="text"
|
|
210
|
-
/>
|
|
211
|
-
|
|
212
|
-
```
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
### Preprocessing Masking Type
|
|
216
|
-
|
|
217
|
-
You can define the mask as a function that can allow you to preprocess the resulting mask. Example sorting for multiple masks or retrieving mask definitions dynamically through ajax. The preprocessing fn should return a valid mask definition.
|
|
218
|
-
|
|
219
|
-
```tsx
|
|
220
|
-
<input
|
|
221
|
-
{...registerWithMask("phone", function () {
|
|
222
|
-
/* do stuff */ return ["[1-]AAA-999", "[1-]999-AAA"];
|
|
223
|
-
})}
|
|
224
|
-
type="text"
|
|
225
|
-
/>
|
|
226
|
-
|
|
227
|
-
```
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
## API
|
|
231
|
-
|
|
232
|
-
### `withMask(mask, options?)`
|
|
233
|
-
Attach a mask to an input via a `ref`:
|
|
234
|
-
```ts
|
|
235
|
-
const attach = withMask('999-9999', { clearIncomplete: true });
|
|
236
|
-
<input ref={attach} />;
|
|
237
|
-
```
|
|
238
|
-
|
|
239
|
-
- **mask**: `string` \| `string[]` \| `(opts: Options) => string \| string[]`
|
|
240
|
-
- **options**: `Options` (see below)
|
|
241
|
-
|
|
242
|
-
---
|
|
243
|
-
|
|
244
|
-
### `useHookFormMask(registerFn)`
|
|
245
|
-
Integrate masking with React-Hook-Form’s `register`:
|
|
246
|
-
```ts
|
|
247
|
-
const maskedRegister = useHookFormMask(register);
|
|
248
|
-
<input {...maskedRegister('phone', '999-9999', { showMaskOnFocus: true })} />;
|
|
249
|
-
```
|
|
250
|
-
|
|
251
|
-
---
|
|
252
|
-
|
|
253
|
-
### `Options`
|
|
254
|
-
|
|
255
|
-
| Option | Description | Type | Default |
|
|
256
|
-
|----------------------------|------------------------------------------------------------------------------------------------------|------------------------------|----------------------------------------------------|
|
|
257
|
-
| `mask` | Static mask, array of masks, or function returning mask(s) | `string \| string[] \| fn` | — |
|
|
258
|
-
| `regex` | Treat the mask as a regular expression | `string` | — |
|
|
259
|
-
| `placeholder` | Character shown for empty slots | `string` | `"_"` |
|
|
260
|
-
| `optionalmarker` | Delimiters for optional sections | `{ start: string; end: string }` | `{ start: "[", end: "]" }` |
|
|
261
|
-
| `quantifiermarker` | Delimiters for repetition ranges | `{ start: string; end: string }` | `{ start: "{", end: "}" }` |
|
|
262
|
-
| `groupmarker` | Delimiters for grouping | `{ start: string; end: string }` | `{ start: "(", end: ")" }` |
|
|
263
|
-
| `alternatormarker` | Character separating alternator options | `string` | `"|"` |
|
|
264
|
-
| `escapeChar` | Character to escape mask meta-symbols | `string` | `"\\"` |
|
|
265
|
-
| `definitions` | Custom symbol→validator mappings | `Record<string,Definition>` | — |
|
|
266
|
-
| `alias` | Built-in preset (“datetime”, “currency”, etc.) | `string` | — |
|
|
267
|
-
| `inputFormat` | Format string for datetime alias | `string` | — |
|
|
268
|
-
| `outputFormat` | Format of unmasked datetime value | `string` | — |
|
|
269
|
-
| `displayFormat` | Visual format when losing focus (datetime alias) | `string` | — |
|
|
270
|
-
| `clearMaskOnLostFocus` | Trim placeholders on blur | `boolean` | `true` |
|
|
271
|
-
| `showMaskOnFocus` | Show full mask when focused | `boolean` | `true` |
|
|
272
|
-
| `showMaskOnHover` | Show mask when hovering | `boolean` | `true` |
|
|
273
|
-
| `clearIncomplete` | Clear input if not fully filled on blur | `boolean` | `false` |
|
|
274
|
-
| `removeMaskOnSubmit` | Strip mask chars on form submit | `boolean` | `false` |
|
|
275
|
-
| `autoUnmask` | Always return unmasked value | `boolean` | `false` |
|
|
276
|
-
| `jitMasking` | Just-in-time masking (only show entered chars) | `boolean` | `false` |
|
|
277
|
-
| `nullable` | Return `""` if no input | `boolean` | `true` |
|
|
278
|
-
| `noValuePatching` | Disable `.value` patching hacks | `boolean` | `false` |
|
|
279
|
-
| `insertMode` | Insert vs overwrite | `boolean` | `true` |
|
|
280
|
-
| `insertModeVisual` | Highlight caret in overwrite mode | `boolean` | `true` |
|
|
281
|
-
| `positionCaretOnClick` | Caret placement on click: `"none"`, `"lvp"`, `"radixFocus"`, `"select"`, `"ignore"` | `string` | `"lvp"` |
|
|
282
|
-
| `positionCaretOnTab` | Move caret to last valid position on Tab | `boolean` | `true` |
|
|
283
|
-
| `tabThrough` | Tab between mask sections | `boolean` | `false` |
|
|
284
|
-
| `skipOptionalPartCharacter`| Character to skip optional blocks | `string` | `" "` |
|
|
285
|
-
| `numericInput` | Keep caret at end for numeric | `boolean` | `false` |
|
|
286
|
-
| `rightAlign` | Right-align numeric | `boolean` | `true` |
|
|
287
|
-
| `radixPoint` | Decimal separator | `string` | `""` |
|
|
288
|
-
| `groupSeparator` | Thousands separator | `string` | `""` |
|
|
289
|
-
| `digits` | Fractional digits count or range | `number \| string` | `"*"` |
|
|
290
|
-
| `digitsOptional` | Allow skipping fractional digits | `boolean` | `true` |
|
|
291
|
-
| `enforceDigitsOnBlur` | Force show fractional digits on blur | `boolean` | `false` |
|
|
292
|
-
| `allowMinus` | Permit minus sign | `boolean` | `true` |
|
|
293
|
-
| `negationSymbol` | Symbols for negative (e.g. `{ front: "-", back: "" }`) | `object` | `{ front: "-", back: "" }` |
|
|
294
|
-
| `prefix` | Static text prepended | `string` | `""` |
|
|
295
|
-
| `suffix` | Static text appended | `string` | `""` |
|
|
296
|
-
| `SetMaxOnOverflow` | Clamp value at `max` if exceeded | `boolean` | `false` |
|
|
297
|
-
| `min` | Minimum allowed (numeric/datetime) | `string \| number` | — |
|
|
298
|
-
| `max` | Maximum allowed (numeric/datetime) | `string \| number` | — |
|
|
299
|
-
| `step` | `Ctrl+↑/↓` increment step (numeric) | `number` | `1` |
|
|
300
|
-
| `repeat` | Repeat mask N times or `"*"` for infinite | `number \| string` | `0` |
|
|
301
|
-
| `greedy` | Greedy vs non-greedy repeat | `boolean` | `false` |
|
|
302
|
-
| `keepStatic` | Delay switching in alternator/multi-mask scenarios | `boolean \| null` | (multi-mask: `true`) |
|
|
303
|
-
| `importDataAttributes` | Read HTML `data-inputmask-*` attrs | `boolean` | `true` |
|
|
304
|
-
| `supportsInputType` | Allow masking on specified `inputmode` types | `string[]` | `["text","tel","url",`<br>`"password","search"]` |
|
|
305
|
-
| `ignorables` | Key codes to ignore | `number[]` | — |
|
|
306
|
-
| `prefillYear` | Pre-fill century in datetime alias | `boolean` | `true` |
|
|
307
|
-
| `casing` | Force letter casing: `"upper"`, `"lower"`, `"title"` | `string` | — |
|
|
308
|
-
| `inputmode` | Hint for on-screen keyboards (HTML `inputmode`) | `string` | `"verbatim"` |
|