feat: add react-hook-form 7 integration

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.json

@@ -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"

src/example/App.example.tsx

@@ -1,16 +1,34 @@
+/* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
-import useMaskInput from '../useMaskInput';
+import { useForm } from 'react-hook-form';
+import useMaskInput, { maskRegister } from '..';
 
 function App() {
   const phone = useMaskInput({
     mask: ['(99) 9999 9999', '(99) 9 9999 9999'],
   });
 
+  const { register, handleSubmit } = useForm();
+
+  const onSubmit = handleSubmit((data) => {
+    console.log(data);
+  });
+
   return (
     <>
-      <h3>Telefone que suporta 8 ou 9 digitos</h3>
+      <h3>Using simple ref</h3>
       <input type="text" ref={phone} />
       <hr />
+      <h3>Using react-hook-form</h3>
+      <form onSubmit={onSubmit}>
+        <input
+          type="text"
+          {...maskRegister(register('phone'), ['(99) 9999 9999', '(99) 9 9999 9999'])}
+        />
+        <button type="submit">Submit</button>
+      </form>
     </>
   );
 }

src/index.tsx

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

src/maskRegister.ts

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/space-before-blocks */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import Inputmask from 'inputmask';
+import { UseFormRegisterReturn } from 'react-hook-form';
+import flowright from 'lodash.flowright';
+
+const maskRegister = (
+  registerReturn: UseFormRegisterReturn,
+  mask: Inputmask.Options['mask'],
+  options?: Inputmask.Options,
+) => {
+  //
+  let newRef;
+
+  if (registerReturn){
+    const { ref } = registerReturn;
+
+    const maskInput = Inputmask({
+      mask,
+      jitMasking: true,
+      ...options,
+    });
+
+    newRef = flowright(ref, (_ref) => {
+      maskInput.mask(_ref);
+      return _ref;
+    });
+  }
+
+  return {
+    ...registerReturn,
+    ref: newRef,
+  };
+};
+
+export default maskRegister;