use-mask-input 3.6.0 → 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 +47 -76
- package/README.md +2 -251
- package/dist/index.cjs +157 -84
- 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 +158 -85
- package/dist/index.js.map +1 -1
- package/package.json +21 -21
- 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} +12 -3
- 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,244 +1,215 @@
|
|
|
1
|
-
|
|
1
|
+
## [3.6.0](https://github.com/eduardoborges/use-mask-input/compare/3.5.2...3.6.0) (2026-01-13)
|
|
2
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
|
|
3
8
|
|
|
4
9
|
### Features
|
|
5
10
|
|
|
6
|
-
|
|
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))
|
|
7
12
|
|
|
8
13
|
## [3.5.2](https://github.com/eduardoborges/use-mask-input/compare/3.5.1...3.5.2) (2025-09-24)
|
|
9
14
|
|
|
10
|
-
|
|
11
15
|
### Bug Fixes
|
|
12
16
|
|
|
13
|
-
|
|
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))
|
|
14
18
|
|
|
15
19
|
## [3.5.1](https://github.com/eduardoborges/use-mask-input/compare/3.5.0...3.5.1) (2025-09-05)
|
|
16
20
|
|
|
17
|
-
|
|
18
21
|
### Bug Fixes
|
|
19
22
|
|
|
20
|
-
|
|
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))
|
|
21
24
|
|
|
22
25
|
# [3.5.0](https://github.com/eduardoborges/use-mask-input/compare/3.4.2...3.5.0) (2025-07-14)
|
|
23
26
|
|
|
24
|
-
|
|
25
27
|
### Features
|
|
26
28
|
|
|
27
|
-
|
|
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))
|
|
28
30
|
|
|
29
31
|
## [3.4.2](https://github.com/eduardoborges/use-mask-input/compare/3.4.1...3.4.2) (2024-11-22)
|
|
30
32
|
|
|
31
|
-
|
|
32
33
|
### Bug Fixes
|
|
33
34
|
|
|
34
|
-
|
|
35
|
+
- mui textfield disappearing ([#95](https://github.com/eduardoborges/use-mask-input/issues/95)) ([fa0caf6](https://github.com/eduardoborges/use-mask-input/commit/fa0caf66fe05f33e5a5aeaf3e92b38352ca46abb))
|
|
35
36
|
|
|
36
37
|
## [3.4.1](https://github.com/eduardoborges/use-mask-input/compare/3.4.0...3.4.1) (2024-11-22)
|
|
37
38
|
|
|
38
|
-
|
|
39
39
|
### Bug Fixes
|
|
40
40
|
|
|
41
|
-
|
|
42
|
-
|
|
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))
|
|
43
43
|
|
|
44
44
|
# [3.4.0](https://github.com/eduardoborges/use-mask-input/compare/3.3.8...3.4.0) (2024-07-23)
|
|
45
45
|
|
|
46
|
-
|
|
47
46
|
### Features
|
|
48
47
|
|
|
49
|
-
|
|
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))
|
|
50
49
|
|
|
51
50
|
## [3.3.8](https://github.com/eduardoborges/use-mask-input/compare/3.3.7...3.3.8) (2024-06-18)
|
|
52
51
|
|
|
53
|
-
|
|
54
52
|
### Bug Fixes
|
|
55
53
|
|
|
56
|
-
|
|
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))
|
|
57
55
|
|
|
58
56
|
## [3.3.7](https://github.com/eduardoborges/use-mask-input/compare/3.3.6...3.3.7) (2023-11-09)
|
|
59
57
|
|
|
60
|
-
|
|
61
58
|
### Bug Fixes
|
|
62
59
|
|
|
63
|
-
|
|
60
|
+
- fix options spread in getMaskOptions function ([e857424](https://github.com/eduardoborges/use-mask-input/commit/e85742442a375f85edfd819475071b29b4bc0af8))
|
|
64
61
|
|
|
65
62
|
## [3.3.6](https://github.com/eduardoborges/use-mask-input/compare/3.3.5...3.3.6) (2023-10-02)
|
|
66
63
|
|
|
67
|
-
|
|
68
64
|
### Bug Fixes
|
|
69
65
|
|
|
70
|
-
|
|
66
|
+
- update dependencies ([a9b6deb](https://github.com/eduardoborges/use-mask-input/commit/a9b6deb977c0273390c6015f15249b9b2e82d738))
|
|
71
67
|
|
|
72
68
|
## [3.3.5](https://github.com/eduardoborges/use-mask-input/compare/3.3.4...3.3.5) (2023-08-30)
|
|
73
69
|
|
|
74
|
-
|
|
75
70
|
### Bug Fixes
|
|
76
71
|
|
|
77
|
-
|
|
72
|
+
- **types:** fix mask options with any type ([7b643b1](https://github.com/eduardoborges/use-mask-input/commit/7b643b1e6afc27ad4e49d5b528e31d1ff6427a8b))
|
|
78
73
|
|
|
79
74
|
## [3.3.4](https://github.com/eduardoborges/use-mask-input/compare/3.3.3...3.3.4) (2023-08-29)
|
|
80
75
|
|
|
81
|
-
|
|
82
76
|
### Bug Fixes
|
|
83
77
|
|
|
84
|
-
|
|
78
|
+
- types and options ([#50](https://github.com/eduardoborges/use-mask-input/issues/50)) ([3bc502e](https://github.com/eduardoborges/use-mask-input/commit/3bc502e770c3aa12c9b248904da57c016c35f6a2))
|
|
85
79
|
|
|
86
80
|
## [3.3.3](https://github.com/eduardoborges/use-mask-input/compare/3.3.2...3.3.3) (2023-08-14)
|
|
87
81
|
|
|
88
|
-
|
|
89
82
|
### Bug Fixes
|
|
90
83
|
|
|
91
|
-
|
|
84
|
+
- **scripts:** remove unused postinstall script ([4a62989](https://github.com/eduardoborges/use-mask-input/commit/4a6298991d02c16af3dcda3edcb8dae4b8874f8a))
|
|
92
85
|
|
|
93
86
|
## [3.3.2](https://github.com/eduardoborges/use-mask-input/compare/3.3.1...3.3.2) (2023-08-10)
|
|
94
87
|
|
|
95
|
-
|
|
96
88
|
### Bug Fixes
|
|
97
89
|
|
|
98
|
-
|
|
99
|
-
|
|
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))
|
|
100
92
|
|
|
101
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)
|
|
102
94
|
|
|
103
|
-
|
|
104
95
|
### Bug Fixes
|
|
105
96
|
|
|
106
|
-
|
|
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))
|
|
107
98
|
|
|
108
99
|
## [3.3.1](https://github.com/eduardoborges/use-mask-input/compare/3.3.0...3.3.1) (2023-08-03)
|
|
109
100
|
|
|
110
|
-
|
|
111
101
|
### Bug Fixes
|
|
112
102
|
|
|
113
|
-
|
|
103
|
+
- **package.json:** add type module ([34faa1e](https://github.com/eduardoborges/use-mask-input/commit/34faa1e41ab27a5a18530988c4df51da6bacc3f5))
|
|
114
104
|
|
|
115
105
|
# [3.3.0](https://github.com/eduardoborges/use-mask-input/compare/3.2.0...3.3.0) (2023-06-30)
|
|
116
106
|
|
|
117
|
-
|
|
118
107
|
### Features
|
|
119
108
|
|
|
120
|
-
|
|
109
|
+
- new useHookFormMask API ([#35](https://github.com/eduardoborges/use-mask-input/issues/35)) ([52609eb](https://github.com/eduardoborges/use-mask-input/commit/52609eb57d77f4cd95a8ccbe868f9e4cbcdc2e47))
|
|
121
110
|
|
|
122
111
|
# [3.2.0](https://github.com/eduardoborges/use-mask-input/compare/3.1.2...3.2.0) (2023-06-14)
|
|
123
112
|
|
|
124
|
-
|
|
125
113
|
### Features
|
|
126
114
|
|
|
127
|
-
|
|
115
|
+
- now works with Next! ([7730de2](https://github.com/eduardoborges/use-mask-input/commit/7730de24237f8df0eede8cf464620b6d1c87c558))
|
|
128
116
|
|
|
129
117
|
## [3.1.2](https://github.com/eduardoborges/use-mask-input/compare/3.1.1...3.1.2) (2023-05-10)
|
|
130
118
|
|
|
131
|
-
|
|
132
119
|
### Bug Fixes
|
|
133
120
|
|
|
134
|
-
|
|
121
|
+
- add inputmask extension support ([eecc00a](https://github.com/eduardoborges/use-mask-input/commit/eecc00a0601ff5bc340c50886a6ab35174006096))
|
|
135
122
|
|
|
136
123
|
## [3.1.1](https://github.com/eduardoborges/use-mask-input/compare/3.1.0...3.1.1) (2023-05-10)
|
|
137
124
|
|
|
138
|
-
|
|
139
125
|
### Bug Fixes
|
|
140
126
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
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)
|
|
144
130
|
|
|
145
131
|
# [3.1.0](https://github.com/eduardoborges/use-mask-input/compare/3.0.6...3.1.0) (2023-05-04)
|
|
146
132
|
|
|
147
|
-
|
|
148
133
|
### Bug Fixes
|
|
149
134
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
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))
|
|
154
138
|
|
|
155
139
|
### Features
|
|
156
140
|
|
|
157
|
-
|
|
141
|
+
- Add React Hook Form to dependencies and install git hooks ([f7496c2](https://github.com/eduardoborges/use-mask-input/commit/f7496c23a429363bc47e03f18c9ce8eb3be41ab0))
|
|
158
142
|
|
|
159
143
|
## [3.0.6](https://github.com/eduardoborges/use-mask-input/compare/3.0.5...3.0.6) (2023-02-10)
|
|
160
144
|
|
|
161
|
-
|
|
162
145
|
### Bug Fixes
|
|
163
146
|
|
|
164
|
-
|
|
147
|
+
- fix regression for cra exports ([b149d78](https://github.com/eduardoborges/use-mask-input/commit/b149d7822dac99db3f308671a13b8fbbe148010c))
|
|
165
148
|
|
|
166
149
|
## [3.0.5](https://github.com/eduardoborges/use-mask-input/compare/3.0.4...3.0.5) (2023-02-09)
|
|
167
150
|
|
|
168
|
-
|
|
169
151
|
### Bug Fixes
|
|
170
152
|
|
|
171
|
-
|
|
153
|
+
- fix module resolution ([ab8a464](https://github.com/eduardoborges/use-mask-input/commit/ab8a464a4cb6fe529d1ff3decc56de925efa68fc))
|
|
172
154
|
|
|
173
155
|
## [3.0.4](https://github.com/eduardoborges/use-mask-input/compare/3.0.3...3.0.4) (2023-02-09)
|
|
174
156
|
|
|
175
|
-
|
|
176
157
|
### Bug Fixes
|
|
177
158
|
|
|
178
|
-
|
|
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))
|
|
179
160
|
|
|
180
161
|
## [3.0.3](https://github.com/eduardoborges/use-mask-input/compare/3.0.2...3.0.3) (2023-02-09)
|
|
181
162
|
|
|
182
|
-
|
|
183
163
|
### Bug Fixes
|
|
184
164
|
|
|
185
|
-
|
|
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))
|
|
186
166
|
|
|
187
167
|
## [3.0.2](https://github.com/eduardoborges/use-mask-input/compare/3.0.1...3.0.2) (2023-02-06)
|
|
188
168
|
|
|
189
|
-
|
|
190
169
|
### Bug Fixes
|
|
191
170
|
|
|
192
|
-
|
|
171
|
+
- remove unused deps and fix vulnerabilities ([a49c5d5](https://github.com/eduardoborges/use-mask-input/commit/a49c5d55b485553fe9a79c38af900fc4def24774))
|
|
193
172
|
|
|
194
173
|
## [3.0.1](https://github.com/eduardoborges/use-mask-input/compare/3.0.0...3.0.1) (2023-01-23)
|
|
195
174
|
|
|
196
|
-
|
|
197
175
|
### Bug Fixes
|
|
198
176
|
|
|
199
|
-
|
|
177
|
+
- security fixes ([aad0816](https://github.com/eduardoborges/use-mask-input/commit/aad08168b9349a6199a3bfa0d1340a5f20cae732))
|
|
200
178
|
|
|
201
179
|
# [3.0.0](https://github.com/eduardoborges/use-mask-input/compare/2.1.0...3.0.0) (2022-10-11)
|
|
202
180
|
|
|
203
|
-
|
|
204
181
|
### Features
|
|
205
182
|
|
|
206
|
-
|
|
207
|
-
|
|
183
|
+
- simplify API & add react-final-form support. ([981588d](https://github.com/eduardoborges/use-mask-input/commit/981588d54121e66d550eb5df9fe64b5de01d70c6))
|
|
208
184
|
|
|
209
185
|
### BREAKING CHANGES
|
|
210
186
|
|
|
211
|
-
|
|
187
|
+
- update api
|
|
212
188
|
|
|
213
189
|
# [2.1.0](https://github.com/eduardoborges/use-mask-input/compare/2.0.1...2.1.0) (2022-09-27)
|
|
214
190
|
|
|
215
|
-
|
|
216
191
|
### Features
|
|
217
192
|
|
|
218
|
-
|
|
193
|
+
- add react-hook-form 7 integration ([0fd5bfc](https://github.com/eduardoborges/use-mask-input/commit/0fd5bfca4f8a686b9d89eba1f319c055073f51ed))
|
|
219
194
|
|
|
220
195
|
## [2.0.1](https://github.com/eduardoborges/use-mask-input/compare/2.0.0...2.0.1) (2022-09-27)
|
|
221
196
|
|
|
222
|
-
|
|
223
197
|
### Bug Fixes
|
|
224
198
|
|
|
225
|
-
|
|
199
|
+
- enhance actions time ([6ea226c](https://github.com/eduardoborges/use-mask-input/commit/6ea226cf1e49f46ff476ad7c1619c136a54a1954))
|
|
226
200
|
|
|
227
201
|
# [2.0.0](https://github.com/eduardoborges/use-mask-input/compare/1.1.0...2.0.0) (2022-09-27)
|
|
228
202
|
|
|
229
|
-
|
|
230
203
|
### Bug Fixes
|
|
231
204
|
|
|
232
|
-
|
|
233
|
-
|
|
205
|
+
- Bump version ([4485125](https://github.com/eduardoborges/use-mask-input/commit/44851258e0b9f767be53d77e279b3604578b8aaa))
|
|
234
206
|
|
|
235
207
|
### BREAKING CHANGES
|
|
236
208
|
|
|
237
|
-
|
|
209
|
+
- update libs to suport new react-hook-form
|
|
238
210
|
|
|
239
211
|
# [1.1.0](https://github.com/eduardoborges/use-mask-input/compare/1.0.2...1.1.0) (2022-09-27)
|
|
240
212
|
|
|
241
|
-
|
|
242
213
|
### Features
|
|
243
214
|
|
|
244
|
-
|
|
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"` |
|