use-mask-input 2.1.0 → 3.0.0
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/README.md +39 -14
- package/dist/index.d.ts +2 -1
- package/dist/index.js +17 -2
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +16 -2
- package/dist/index.modern.js.map +1 -1
- package/dist/{maskRegister.d.ts → withHookFormMask.d.ts} +2 -2
- package/dist/withMask.d.ts +3 -0
- package/package.json +3 -1
package/README.md
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/use-mask-input) [](https://standardjs.com) [](https://bundlephobia.com/result?p=use-mask-input)
|
|
4
4
|
|
|
5
|
-
A React Hook for build elegant input masks.
|
|
5
|
+
A React Hook for build elegant and simple input masks.
|
|
6
6
|
|
|
7
7
|
## Todo
|
|
8
|
-
|
|
9
|
-
- [
|
|
8
|
+
- [x] Add react-final-form support
|
|
9
|
+
- [x] Simplify API
|
|
10
10
|
- [ ] Make tests :P
|
|
11
11
|
- [ ] Better example page with GH pages
|
|
12
12
|
|
|
@@ -14,7 +14,8 @@ A React Hook for build elegant input masks.
|
|
|
14
14
|
## Features
|
|
15
15
|
|
|
16
16
|
- ✨ Compatible with [React Hook Form](https://github.com/react-hook-form/react-hook-form)
|
|
17
|
-
-
|
|
17
|
+
- 🏁 Compatible with [React Final Form](https://github.com/final-form/react-final-form)
|
|
18
|
+
- 🎯 Simple API
|
|
18
19
|
|
|
19
20
|
## Install
|
|
20
21
|
|
|
@@ -26,27 +27,23 @@ yarn add use-mask-input
|
|
|
26
27
|
|
|
27
28
|
## Quickstart
|
|
28
29
|
|
|
29
|
-
```
|
|
30
|
+
```jsx
|
|
30
31
|
import React from 'react'
|
|
31
|
-
import
|
|
32
|
+
import { withMask } from 'use-mask-input';
|
|
32
33
|
|
|
33
34
|
const App = () => {
|
|
34
|
-
const ref = useMaskInput({
|
|
35
|
-
mask: ['999-999', '999-9999']
|
|
36
|
-
})
|
|
37
|
-
|
|
38
35
|
return (
|
|
39
|
-
<input type="text" ref={
|
|
36
|
+
<input type="text" ref={withMask('9999-9999')} />
|
|
40
37
|
)
|
|
41
38
|
}
|
|
42
39
|
```
|
|
43
40
|
|
|
44
41
|
## Usage with React Hook Forms
|
|
45
42
|
|
|
46
|
-
```
|
|
43
|
+
```jsx
|
|
47
44
|
import React from 'react';
|
|
48
45
|
import { useForm } from 'react-hook-form';
|
|
49
|
-
import
|
|
46
|
+
import { withHookFormMask } from 'use-mask-input';
|
|
50
47
|
|
|
51
48
|
function App() {
|
|
52
49
|
const { register, handleSubmit } = useForm();
|
|
@@ -57,7 +54,7 @@ function App() {
|
|
|
57
54
|
<form onSubmit={onSubmit}>
|
|
58
55
|
<input
|
|
59
56
|
type="text"
|
|
60
|
-
{...
|
|
57
|
+
{...withHookFormMask(register('phone'), ['(99) 9999 9999', '(99) 9 9999 9999'])}
|
|
61
58
|
/>
|
|
62
59
|
<button type="submit">Submit</button>
|
|
63
60
|
</form>
|
|
@@ -65,6 +62,34 @@ function App() {
|
|
|
65
62
|
}
|
|
66
63
|
```
|
|
67
64
|
|
|
65
|
+
## Usage with React Final Form
|
|
66
|
+
|
|
67
|
+
```jsx
|
|
68
|
+
import React from 'react';
|
|
69
|
+
import { Form, Field } from 'react-final-form';
|
|
70
|
+
import { withHookFormMask } from 'use-mask-input';
|
|
71
|
+
|
|
72
|
+
function App() {
|
|
73
|
+
...
|
|
74
|
+
return (
|
|
75
|
+
<Form
|
|
76
|
+
onSubmit={onSubmit}
|
|
77
|
+
render={({ handleSubmit }) => (
|
|
78
|
+
<form onSubmit={handleSubmit}>
|
|
79
|
+
<Field
|
|
80
|
+
name="phone"
|
|
81
|
+
render={({ input, meta }) => (
|
|
82
|
+
<input ref={withMask('9999-9999')} {...input} />
|
|
83
|
+
)}
|
|
84
|
+
/>
|
|
85
|
+
<button type="submit">Submit</button>
|
|
86
|
+
</form>
|
|
87
|
+
)}
|
|
88
|
+
/>
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
68
93
|
## License
|
|
69
94
|
|
|
70
95
|
MIT © [eduardoborges](https://github.com/eduardoborges)
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -43,7 +43,7 @@ var useInputMask = function useInputMask(props) {
|
|
|
43
43
|
return ref;
|
|
44
44
|
};
|
|
45
45
|
|
|
46
|
-
var
|
|
46
|
+
var withHookFormMask = function withHookFormMask(registerReturn, mask, options) {
|
|
47
47
|
var newRef;
|
|
48
48
|
|
|
49
49
|
if (registerReturn) {
|
|
@@ -63,6 +63,21 @@ var maskRegister = function maskRegister(registerReturn, mask, options) {
|
|
|
63
63
|
});
|
|
64
64
|
};
|
|
65
65
|
|
|
66
|
+
var withFinalFormMask = function withFinalFormMask(mask, options) {
|
|
67
|
+
return function (input) {
|
|
68
|
+
var maskInput = Inputmask(_extends({
|
|
69
|
+
mask: mask
|
|
70
|
+
}, options));
|
|
71
|
+
|
|
72
|
+
if (input) {
|
|
73
|
+
maskInput.mask(input);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
return input;
|
|
77
|
+
};
|
|
78
|
+
};
|
|
79
|
+
|
|
66
80
|
exports.default = useInputMask;
|
|
67
|
-
exports.
|
|
81
|
+
exports.withHookFormMask = withHookFormMask;
|
|
82
|
+
exports.withMask = withFinalFormMask;
|
|
68
83
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/useMaskInput.ts","../src/
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/useMaskInput.ts","../src/withHookFormMask.ts","../src/withMask.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\n\ninterface UseInputMaskOptions {\n mask: Inputmask.Options['mask']\n register?(element: HTMLElement): void\n options?: Inputmask.Options\n}\n\nconst useInputMask = (props: UseInputMaskOptions) => {\n const { mask, register, options } = props;\n\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (!ref.current) {\n return;\n }\n\n const maskInput = Inputmask({\n mask,\n ...options,\n });\n\n maskInput.mask(ref.current);\n\n if (register && ref.current) {\n register(ref.current);\n }\n }, [mask, register, options]);\n\n return ref;\n};\n\nexport default useInputMask;\n","/* eslint-disable @typescript-eslint/space-before-blocks */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport Inputmask from 'inputmask';\nimport { UseFormRegisterReturn } from 'react-hook-form';\nimport flowright from 'lodash.flowright';\n\nconst withHookFormMask = (\n registerReturn: UseFormRegisterReturn,\n mask: Inputmask.Options['mask'],\n options?: Inputmask.Options,\n) => {\n //\n let newRef;\n\n if (registerReturn){\n const { ref } = registerReturn;\n\n const maskInput = Inputmask({\n mask,\n jitMasking: true,\n ...options,\n });\n\n newRef = flowright(ref, (_ref) => {\n maskInput.mask(_ref);\n return _ref;\n });\n }\n\n return {\n ...registerReturn,\n ref: newRef,\n };\n};\n\nexport default withHookFormMask;\n","import Inputmask from 'inputmask';\n\nconst withFinalFormMask = (\n mask: Inputmask.Options['mask'],\n options?: Inputmask.Options,\n) => (input: HTMLElement | HTMLInputElement | null) => {\n //\n const maskInput = Inputmask({\n mask,\n ...options,\n });\n\n if (input) {\n maskInput.mask(input);\n }\n\n return input;\n};\n\nexport default withFinalFormMask;\n"],"names":["useInputMask","props","mask","register","options","ref","useRef","useEffect","current","maskInput","Inputmask","withHookFormMask","registerReturn","newRef","jitMasking","flowright","_ref","withFinalFormMask","input"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AASA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD;EACnB,IAAQC,IAAR,GAAoCD,KAApC,CAAQC,IAAR;MAAcC,QAAd,GAAoCF,KAApC,CAAcE,QAAd;MAAwBC,OAAxB,GAAoCH,KAApC,CAAwBG,OAAxB;EAEA,IAAMC,GAAG,GAAGC,YAAM,CAAmB,IAAnB,CAAlB;EAEAC,eAAS,CAAC;IACR,IAAI,CAACF,GAAG,CAACG,OAAT,EAAkB;MAChB;;;IAGF,IAAMC,SAAS,GAAGC,SAAS;MACzBR,IAAI,EAAJA;OACGE,OAFsB,EAA3B;IAKAK,SAAS,CAACP,IAAV,CAAeG,GAAG,CAACG,OAAnB;;IAEA,IAAIL,QAAQ,IAAIE,GAAG,CAACG,OAApB,EAA6B;MAC3BL,QAAQ,CAACE,GAAG,CAACG,OAAL,CAAR;;GAbK,EAeN,CAACN,IAAD,EAAOC,QAAP,EAAiBC,OAAjB,CAfM,CAAT;EAiBA,OAAOC,GAAP;AACD,CAvBD;;ACHA,IAAMM,gBAAgB,GAAG,SAAnBA,gBAAmB,CACvBC,cADuB,EAEvBV,IAFuB,EAGvBE,OAHuB;EAMvB,IAAIS,MAAJ;;EAEA,IAAID,cAAJ,EAAmB;IACjB,IAAQP,GAAR,GAAgBO,cAAhB,CAAQP,GAAR;IAEA,IAAMI,SAAS,GAAGC,SAAS;MACzBR,IAAI,EAAJA,IADyB;MAEzBY,UAAU,EAAE;OACTV,OAHsB,EAA3B;IAMAS,MAAM,GAAGE,SAAS,CAACV,GAAD,EAAM,UAACW,IAAD;MACtBP,SAAS,CAACP,IAAV,CAAec,IAAf;MACA,OAAOA,IAAP;KAFgB,CAAlB;;;EAMF,oBACKJ,cADL;IAEEP,GAAG,EAAEQ;;AAER,CA3BD;;ACJA,IAAMI,iBAAiB,GAAG,SAApBA,iBAAoB,CACxBf,IADwB,EAExBE,OAFwB;EAAA,OAGrB,UAACc,KAAD;IAEH,IAAMT,SAAS,GAAGC,SAAS;MACzBR,IAAI,EAAJA;OACGE,OAFsB,EAA3B;;IAKA,IAAIc,KAAJ,EAAW;MACTT,SAAS,CAACP,IAAV,CAAegB,KAAf;;;IAGF,OAAOA,KAAP;GAdwB;AAAA,CAA1B;;;;;;"}
|
package/dist/index.modern.js
CHANGED
|
@@ -41,7 +41,7 @@ var useInputMask = function useInputMask(props) {
|
|
|
41
41
|
return ref;
|
|
42
42
|
};
|
|
43
43
|
|
|
44
|
-
var
|
|
44
|
+
var withHookFormMask = function withHookFormMask(registerReturn, mask, options) {
|
|
45
45
|
var newRef;
|
|
46
46
|
|
|
47
47
|
if (registerReturn) {
|
|
@@ -61,6 +61,20 @@ var maskRegister = function maskRegister(registerReturn, mask, options) {
|
|
|
61
61
|
});
|
|
62
62
|
};
|
|
63
63
|
|
|
64
|
+
var withFinalFormMask = function withFinalFormMask(mask, options) {
|
|
65
|
+
return function (input) {
|
|
66
|
+
var maskInput = Inputmask(_extends({
|
|
67
|
+
mask: mask
|
|
68
|
+
}, options));
|
|
69
|
+
|
|
70
|
+
if (input) {
|
|
71
|
+
maskInput.mask(input);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
return input;
|
|
75
|
+
};
|
|
76
|
+
};
|
|
77
|
+
|
|
64
78
|
export default useInputMask;
|
|
65
|
-
export {
|
|
79
|
+
export { withHookFormMask, withFinalFormMask as withMask };
|
|
66
80
|
//# sourceMappingURL=index.modern.js.map
|
package/dist/index.modern.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.modern.js","sources":["../src/useMaskInput.ts","../src/
|
|
1
|
+
{"version":3,"file":"index.modern.js","sources":["../src/useMaskInput.ts","../src/withHookFormMask.ts","../src/withMask.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\n\ninterface UseInputMaskOptions {\n mask: Inputmask.Options['mask']\n register?(element: HTMLElement): void\n options?: Inputmask.Options\n}\n\nconst useInputMask = (props: UseInputMaskOptions) => {\n const { mask, register, options } = props;\n\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (!ref.current) {\n return;\n }\n\n const maskInput = Inputmask({\n mask,\n ...options,\n });\n\n maskInput.mask(ref.current);\n\n if (register && ref.current) {\n register(ref.current);\n }\n }, [mask, register, options]);\n\n return ref;\n};\n\nexport default useInputMask;\n","/* eslint-disable @typescript-eslint/space-before-blocks */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport Inputmask from 'inputmask';\nimport { UseFormRegisterReturn } from 'react-hook-form';\nimport flowright from 'lodash.flowright';\n\nconst withHookFormMask = (\n registerReturn: UseFormRegisterReturn,\n mask: Inputmask.Options['mask'],\n options?: Inputmask.Options,\n) => {\n //\n let newRef;\n\n if (registerReturn){\n const { ref } = registerReturn;\n\n const maskInput = Inputmask({\n mask,\n jitMasking: true,\n ...options,\n });\n\n newRef = flowright(ref, (_ref) => {\n maskInput.mask(_ref);\n return _ref;\n });\n }\n\n return {\n ...registerReturn,\n ref: newRef,\n };\n};\n\nexport default withHookFormMask;\n","import Inputmask from 'inputmask';\n\nconst withFinalFormMask = (\n mask: Inputmask.Options['mask'],\n options?: Inputmask.Options,\n) => (input: HTMLElement | HTMLInputElement | null) => {\n //\n const maskInput = Inputmask({\n mask,\n ...options,\n });\n\n if (input) {\n maskInput.mask(input);\n }\n\n return input;\n};\n\nexport default withFinalFormMask;\n"],"names":["useInputMask","props","mask","register","options","ref","useRef","useEffect","current","maskInput","Inputmask","withHookFormMask","registerReturn","newRef","jitMasking","flowright","_ref","withFinalFormMask","input"],"mappings":";;;;;;;;;;;;;;;;;;;;;AASA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD;EACnB,IAAQC,IAAR,GAAoCD,KAApC,CAAQC,IAAR;MAAcC,QAAd,GAAoCF,KAApC,CAAcE,QAAd;MAAwBC,OAAxB,GAAoCH,KAApC,CAAwBG,OAAxB;EAEA,IAAMC,GAAG,GAAGC,MAAM,CAAmB,IAAnB,CAAlB;EAEAC,SAAS,CAAC;IACR,IAAI,CAACF,GAAG,CAACG,OAAT,EAAkB;MAChB;;;IAGF,IAAMC,SAAS,GAAGC,SAAS;MACzBR,IAAI,EAAJA;OACGE,OAFsB,EAA3B;IAKAK,SAAS,CAACP,IAAV,CAAeG,GAAG,CAACG,OAAnB;;IAEA,IAAIL,QAAQ,IAAIE,GAAG,CAACG,OAApB,EAA6B;MAC3BL,QAAQ,CAACE,GAAG,CAACG,OAAL,CAAR;;GAbK,EAeN,CAACN,IAAD,EAAOC,QAAP,EAAiBC,OAAjB,CAfM,CAAT;EAiBA,OAAOC,GAAP;AACD,CAvBD;;ACHA,IAAMM,gBAAgB,GAAG,SAAnBA,gBAAmB,CACvBC,cADuB,EAEvBV,IAFuB,EAGvBE,OAHuB;EAMvB,IAAIS,MAAJ;;EAEA,IAAID,cAAJ,EAAmB;IACjB,IAAQP,GAAR,GAAgBO,cAAhB,CAAQP,GAAR;IAEA,IAAMI,SAAS,GAAGC,SAAS;MACzBR,IAAI,EAAJA,IADyB;MAEzBY,UAAU,EAAE;OACTV,OAHsB,EAA3B;IAMAS,MAAM,GAAGE,SAAS,CAACV,GAAD,EAAM,UAACW,IAAD;MACtBP,SAAS,CAACP,IAAV,CAAec,IAAf;MACA,OAAOA,IAAP;KAFgB,CAAlB;;;EAMF,oBACKJ,cADL;IAEEP,GAAG,EAAEQ;;AAER,CA3BD;;ACJA,IAAMI,iBAAiB,GAAG,SAApBA,iBAAoB,CACxBf,IADwB,EAExBE,OAFwB;EAAA,OAGrB,UAACc,KAAD;IAEH,IAAMT,SAAS,GAAGC,SAAS;MACzBR,IAAI,EAAJA;OACGE,OAFsB,EAA3B;;IAKA,IAAIc,KAAJ,EAAW;MACTT,SAAS,CAACP,IAAV,CAAegB,KAAf;;;IAGF,OAAOA,KAAP;GAdwB;AAAA,CAA1B;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import Inputmask from 'inputmask';
|
|
2
2
|
import { UseFormRegisterReturn } from 'react-hook-form';
|
|
3
|
-
declare const
|
|
3
|
+
declare const withHookFormMask: (registerReturn: UseFormRegisterReturn, mask: Inputmask.Options['mask'], options?: Inputmask.Options | undefined) => {
|
|
4
4
|
ref: ((_ref: any) => void) | undefined;
|
|
5
5
|
onChange: import("react-hook-form").ChangeHandler;
|
|
6
6
|
onBlur: import("react-hook-form").ChangeHandler;
|
|
@@ -13,4 +13,4 @@ declare const maskRegister: (registerReturn: UseFormRegisterReturn, mask: Inputm
|
|
|
13
13
|
required?: boolean | undefined;
|
|
14
14
|
disabled?: boolean | undefined;
|
|
15
15
|
};
|
|
16
|
-
export default
|
|
16
|
+
export default withHookFormMask;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "use-mask-input",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "A react Hook for build elegant input masks. Compatible with React Hook Form",
|
|
5
5
|
"author": "eduardoborges",
|
|
6
6
|
"license": "MIT",
|
|
@@ -61,9 +61,11 @@
|
|
|
61
61
|
"dist"
|
|
62
62
|
],
|
|
63
63
|
"dependencies": {
|
|
64
|
+
"final-form": "^4.20.7",
|
|
64
65
|
"inputmask": "^5.0.7",
|
|
65
66
|
"lodash.compose": "^2.4.1",
|
|
66
67
|
"lodash.flowright": "^3.5.0",
|
|
68
|
+
"react-final-form": "^6.5.9",
|
|
67
69
|
"react-hook-form": "^7.36.1"
|
|
68
70
|
},
|
|
69
71
|
"bundleDependencies": [
|