use-mask-input 2.0.0 → 2.1.0

package/README.md

@@ -44,28 +44,24 @@ const App = () => {
 ## Usage with React Hook Forms
 
 ```tsx
-import React from 'react'
-import useMaskInput from 'use-mask-input';
+import React from 'react';
 import { useForm } from 'react-hook-form';
+import useMaskInput, { maskRegister } from 'use-mask-input';
 
-const App = () => {
-  const { register, handleSubmit, errors } = useForm();
-
-  const onSubmit = (data) => {
-    console.log(data);
-  };
+function App() {
+  const { register, handleSubmit } = useForm();
 
-  const maskedPhoneRef = useMaskInput({
-    mask: ['(99) 9999 9999', '(99) 9 9999 9999'],
-    register: register,
-  })
+  ...
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input name="phone" ref={maskedPhoneRef} /> {/* register an input */}
-      <input type="submit" />
+    <form onSubmit={onSubmit}>
+      <input
+        type="text"
+        {...maskRegister(register('phone'), ['(99) 9999 9999', '(99) 9 9999 9999'])}
+      />
+      <button type="submit">Submit</button>
     </form>
-  )
+  );
 }
 ```
 

package/dist/index.d.ts

@@ -1 +1,2 @@
 export { default } from './useMaskInput';
+export { default as maskRegister } from './maskRegister';

package/dist/index.js

@@ -2,6 +2,7 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var react = require('react');
 var Inputmask = _interopDefault(require('inputmask'));
+var flowright = _interopDefault(require('lodash.flowright'));
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -42,5 +43,26 @@ var useInputMask = function useInputMask(props) {
   return ref;
 };
 
-module.exports = useInputMask;
+var maskRegister = function maskRegister(registerReturn, mask, options) {
+  var newRef;
+
+  if (registerReturn) {
+    var ref = registerReturn.ref;
+    var maskInput = Inputmask(_extends({
+      mask: mask,
+      jitMasking: true
+    }, options));
+    newRef = flowright(ref, function (_ref) {
+      maskInput.mask(_ref);
+      return _ref;
+    });
+  }
+
+  return _extends({}, registerReturn, {
+    ref: newRef
+  });
+};
+
+exports.default = useInputMask;
+exports.maskRegister = maskRegister;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/useMaskInput.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"],"names":["useInputMask","props","mask","register","options","ref","useRef","useEffect","current","maskInput","Inputmask"],"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;;;;"}
+{"version":3,"file":"index.js","sources":["../src/useMaskInput.ts","../src/maskRegister.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 maskRegister = (\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 maskRegister;\n"],"names":["useInputMask","props","mask","register","options","ref","useRef","useEffect","current","maskInput","Inputmask","maskRegister","registerReturn","newRef","jitMasking","flowright","_ref"],"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,YAAY,GAAG,SAAfA,YAAe,CACnBC,cADmB,EAEnBV,IAFmB,EAGnBE,OAHmB;EAMnB,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;;;;;"}

package/dist/index.modern.js

@@ -1,5 +1,6 @@
 import { useRef, useEffect } from 'react';
 import Inputmask from 'inputmask';
+import flowright from 'lodash.flowright';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -40,5 +41,26 @@ var useInputMask = function useInputMask(props) {
   return ref;
 };
 
+var maskRegister = function maskRegister(registerReturn, mask, options) {
+  var newRef;
+
+  if (registerReturn) {
+    var ref = registerReturn.ref;
+    var maskInput = Inputmask(_extends({
+      mask: mask,
+      jitMasking: true
+    }, options));
+    newRef = flowright(ref, function (_ref) {
+      maskInput.mask(_ref);
+      return _ref;
+    });
+  }
+
+  return _extends({}, registerReturn, {
+    ref: newRef
+  });
+};
+
 export default useInputMask;
+export { maskRegister };
 //# sourceMappingURL=index.modern.js.map

package/dist/index.modern.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.modern.js","sources":["../src/useMaskInput.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"],"names":["useInputMask","props","mask","register","options","ref","useRef","useEffect","current","maskInput","Inputmask"],"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;;;;"}
+{"version":3,"file":"index.modern.js","sources":["../src/useMaskInput.ts","../src/maskRegister.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 maskRegister = (\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 maskRegister;\n"],"names":["useInputMask","props","mask","register","options","ref","useRef","useEffect","current","maskInput","Inputmask","maskRegister","registerReturn","newRef","jitMasking","flowright","_ref"],"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,YAAY,GAAG,SAAfA,YAAe,CACnBC,cADmB,EAEnBV,IAFmB,EAGnBE,OAHmB;EAMnB,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;;;;;"}

package/dist/maskRegister.d.ts

@@ -0,0 +1,16 @@
+import Inputmask from 'inputmask';
+import { UseFormRegisterReturn } from 'react-hook-form';
+declare const maskRegister: (registerReturn: UseFormRegisterReturn, mask: Inputmask.Options['mask'], options?: Inputmask.Options | undefined) => {
+    ref: ((_ref: any) => void) | undefined;
+    onChange: import("react-hook-form").ChangeHandler;
+    onBlur: import("react-hook-form").ChangeHandler;
+    name: string;
+    min?: string | number | undefined;
+    max?: string | number | undefined;
+    maxLength?: number | undefined;
+    minLength?: number | undefined;
+    pattern?: string | undefined;
+    required?: boolean | undefined;
+    disabled?: boolean | undefined;
+};
+export default maskRegister;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-mask-input",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A react Hook for build elegant input masks. Compatible with React Hook Form",
   "author": "eduardoborges",
   "license": "MIT",
@@ -35,6 +35,7 @@
     "@semantic-release/release-notes-generator": "10.0.3",
     "@types/inputmask": "^5.0.3",
     "@types/jest": "29.0.3",
+    "@types/lodash.flowright": "^3.5.7",
     "@types/node": "18",
     "@types/react": "^17.x",
     "@types/react-dom": "^17.x",
@@ -60,7 +61,10 @@
     "dist"
   ],
   "dependencies": {
-    "inputmask": "^5.0.7"
+    "inputmask": "^5.0.7",
+    "lodash.compose": "^2.4.1",
+    "lodash.flowright": "^3.5.0",
+    "react-hook-form": "^7.36.1"
   },
   "bundleDependencies": [
     "inputmask"