feat: add dynamic imputmask lib

nexpy-io · Feb 27, 2023 · 187dad3 · 187dad3
1 parent 0061ee0
commit 187dad3
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "react",
     "typescript"
   ],
-  "version": "2.1.11",
+  "version": "2.1.12",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",

diff --git a/src/utils/form-utils.stories.mdx b/src/utils/form-utils.stories.mdx
@@ -13,7 +13,19 @@ Create a mask for React Hook Form based fields.
 Using the function with React Hook Form:
 
 ```tsx
-<Field {...withHookFormMask(register('name', ['(99) 9999 9999', '(99) 9 9999 9999']))} />
+// Needs inputmask lib
+// Import dynamically by the client if you are using Server Side Rendering
+import Inputmask from 'inputmask'
+
+const foo = () => (
+  <Field
+    {...withHookFormMask(
+      Inputmask,
+      register('name', ['(99) 9999 9999', '(99) 9 9999 9999']),
+      {} // WithMaskOptions
+    )}
+  />
+)
 ```
 
 <br />
@@ -25,7 +37,20 @@ Create a mask for generic inputs.
 Using the function without React Hook Form:
 
 ```tsx
-<input type='text' ref={withMask('9999-9999')} />
+// Needs inputmask lib
+// Import dynamically by the client if you are using Server Side Rendering
+import Inputmask from 'inputmask'
+
+const foo = () => (
+  <input
+    type='text'
+    ref={withMask(
+      Inputmask,
+      '9999-9999',
+      {} // WithMaskOptions
+    )}
+  />
+)
 ```
 
 ## Exported Types

diff --git a/src/utils/form-utils.ts b/src/utils/form-utils.ts
@@ -1,9 +1,10 @@
 import type { UseFormRegisterReturn } from 'react-hook-form'
 
-import Inputmask from 'inputmask'
+import type Inputmask from 'inputmask'
 import flowright from 'lodash.flowright'
 
 export const withHookFormMask = (
+  InputmaskFunction: typeof Inputmask,
   registerReturn: UseFormRegisterReturn,
   mask: Inputmask.Options['mask'],
   options?: Inputmask.Options
@@ -13,7 +14,7 @@ export const withHookFormMask = (
   if (registerReturn) {
     const { ref } = registerReturn
 
-    const maskInput = Inputmask({
+    const maskInput = InputmaskFunction({
       mask,
       jitMasking: true,
       ...options,
@@ -32,10 +33,14 @@ export const withHookFormMask = (
 }
 
 export const withMask =
-  (mask: Inputmask.Options['mask'], options?: Inputmask.Options) =>
+  (
+    InputmaskFunction: typeof Inputmask,
+    mask: Inputmask.Options['mask'],
+    options?: Inputmask.Options
+  ) =>
   (input: HTMLElement | HTMLInputElement | null) => {
     //
-    const maskInput = Inputmask({
+    const maskInput = InputmaskFunction({
       mask,
       ...options,
     })