use-mask-input 2.0.1 → 3.0.0

package/README.md

@@ -2,11 +2,11 @@
 
 [![NPM](https://img.shields.io/npm/v/use-mask-input.svg)](https://www.npmjs.com/package/use-mask-input) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![Bundle Size](https://badgen.net/bundlephobia/minzip/use-mask-input)](https://bundlephobia.com/result?p=use-mask-input)
 
-A React Hook for build elegant input masks.
+A React Hook for build elegant and simple input masks.
 
 ## Todo
-
-- [ ] Enhance bundle sizes
+- [x] Add react-final-form support
+- [x] Simplify API
 - [ ] Make tests :P
 - [ ] Better example page with GH pages
 
@@ -14,7 +14,8 @@ A React Hook for build elegant input masks.
 ## Features
 
 - ✨  Compatible with [React Hook Form](https://github.com/react-hook-form/react-hook-form)
-- 🎯  No complex API
+- 🏁  Compatible with [React Final Form](https://github.com/final-form/react-final-form)
+- 🎯  Simple API
 
 ## Install
 
@@ -26,46 +27,66 @@ yarn add use-mask-input
 
 ## Quickstart
 
-```tsx
+```jsx
 import React from 'react'
-import useMaskInput from 'use-mask-input';
+import { withMask } from 'use-mask-input';
 
 const App = () => {
-  const ref = useMaskInput({
-    mask: ['999-999', '999-9999']
-  })
-
   return (
-    <input type="text" ref={ref} />
+    <input type="text" ref={withMask('9999-9999')} />
   )
 }
 ```
 
 ## Usage with React Hook Forms
 
-```tsx
-import React from 'react'
-import useMaskInput from 'use-mask-input';
+```jsx
+import React from 'react';
 import { useForm } from 'react-hook-form';
+import { withHookFormMask } 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"
+        {...withHookFormMask(register('phone'), ['(99) 9999 9999', '(99) 9 9999 9999'])}
+      />
+      <button type="submit">Submit</button>
     </form>
-  )
+  );
+}
+```
+
+## Usage with React Final Form
+
+```jsx
+import React from 'react';
+import { Form, Field } from 'react-final-form';
+import { withHookFormMask } from 'use-mask-input';
+
+function App() {
+  ...
+  return (
+    <Form
+      onSubmit={onSubmit}
+      render={({ handleSubmit }) => (
+        <form onSubmit={handleSubmit}>
+          <Field
+            name="phone"
+            render={({ input, meta }) => (
+              <input ref={withMask('9999-9999')} {...input} />
+            )}
+          />
+          <button type="submit">Submit</button>
+        </form>
+      )}
+    />
+  );
 }
 ```
 

package/dist/index.d.ts

@@ -1 +1,3 @@
 export { default } from './useMaskInput';
+export { default as withHookFormMask } from './withHookFormMask';
+export { default as withMask } from './withMask';

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,41 @@ var useInputMask = function useInputMask(props) {
   return ref;
 };
 
-module.exports = useInputMask;
+var withHookFormMask = function withHookFormMask(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
+  });
+};
+
+var withFinalFormMask = function withFinalFormMask(mask, options) {
+  return function (input) {
+    var maskInput = Inputmask(_extends({
+      mask: mask
+    }, options));
+
+    if (input) {
+      maskInput.mask(input);
+    }
+
+    return input;
+  };
+};
+
+exports.default = useInputMask;
+exports.withHookFormMask = withHookFormMask;
+exports.withMask = withFinalFormMask;
 //# 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/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

@@ -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,40 @@ var useInputMask = function useInputMask(props) {
   return ref;
 };
 
+var withHookFormMask = function withHookFormMask(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
+  });
+};
+
+var withFinalFormMask = function withFinalFormMask(mask, options) {
+  return function (input) {
+    var maskInput = Inputmask(_extends({
+      mask: mask
+    }, options));
+
+    if (input) {
+      maskInput.mask(input);
+    }
+
+    return input;
+  };
+};
+
 export default useInputMask;
+export { withHookFormMask, withFinalFormMask as withMask };
 //# 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/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;;;;;"}

package/dist/withHookFormMask.d.ts

@@ -0,0 +1,16 @@
+import Inputmask from 'inputmask';
+import { UseFormRegisterReturn } from 'react-hook-form';
+declare const withHookFormMask: (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 withHookFormMask;

package/dist/withMask.d.ts

@@ -0,0 +1,3 @@
+import Inputmask from 'inputmask';
+declare const withFinalFormMask: (mask: Inputmask.Options['mask'], options?: Inputmask.Options | undefined) => (input: HTMLElement | HTMLInputElement | null) => HTMLElement | HTMLInputElement | null;
+export default withFinalFormMask;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-mask-input",
-  "version": "2.0.1",
+  "version": "3.0.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,12 @@
     "dist"
   ],
   "dependencies": {
-    "inputmask": "^5.0.7"
+    "final-form": "^4.20.7",
+    "inputmask": "^5.0.7",
+    "lodash.compose": "^2.4.1",
+    "lodash.flowright": "^3.5.0",
+    "react-final-form": "^6.5.9",
+    "react-hook-form": "^7.36.1"
   },
   "bundleDependencies": [
     "inputmask"