diff --git a/package.json b/package.json index b8aab0a..fb2646a 100644 --- 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 index adf8631..9b5e36b 100644 --- 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 - +// Needs inputmask lib +// Import dynamically by the client if you are using Server Side Rendering +import Inputmask from 'inputmask' + +const foo = () => ( + +) ```
@@ -25,7 +37,20 @@ Create a mask for generic inputs. Using the function without React Hook Form: ```tsx - +// Needs inputmask lib +// Import dynamically by the client if you are using Server Side Rendering +import Inputmask from 'inputmask' + +const foo = () => ( + +) ``` ## Exported Types diff --git a/src/utils/form-utils.ts b/src/utils/form-utils.ts index b39c068..0cbb374 100644 --- 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, })