use-mask-input 3.1.0 → 3.1.2

package/README.md

@@ -1,28 +1,24 @@
-# use-mask-input
+# 🥸 use-mask-input
 
-[![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)
+[![NPM](https://img.shields.io/npm/v/use-mask-input.svg)](https://www.npmjs.com/package/use-mask-input) [![Bundle Size](https://badgen.net/bundlephobia/minzip/use-mask-input)](https://bundlephobia.com/result?p=use-mask-input)
 
 A React Hook for build elegant and simple input masks.
 
-## Todo
-- [x] Add react-final-form support
-- [x] Simplify API
-- [ ] Make tests :P
-- [ ] Better example page with GH pages
-
+---
 
 ## Features
-
+- 🎯  Simple API
 - ✨  Compatible with [React Hook Form](https://github.com/react-hook-form/react-hook-form)
 - 🏁  Compatible with [React Final Form](https://github.com/final-form/react-final-form)
-- 🎯  Simple API
+
+## Know Issues
+
+- Not compatible with Next.js, but we are working on it
 
 ## Install
 
-```bash
-npm install --save use-mask-input
-## or
-yarn add use-mask-input
+```sh
+npm i use-mask-input
 ```
 
 ## Quickstart
@@ -64,10 +60,12 @@ function App() {
 
 ## Usage with React Final Form
 
+Just use `withMask` normaly.
+
 ```jsx
 import React from 'react';
 import { Form, Field } from 'react-final-form';
-import { withHookFormMask } from 'use-mask-input';
+import { withMask } from 'use-mask-input';
 
 function App() {
   ...
@@ -89,7 +87,3 @@ function App() {
   );
 }
 ```
-
-## License
-
-MIT © [eduardoborges](https://github.com/eduardoborges)

package/dist/index.cjs

@@ -6,9 +6,23 @@ var react = require('react');
 var Inputmask = require('inputmask');
 
 const isServer = !(typeof window !== 'undefined' && window.document && window.document.createElement);
-const compose = (fn1, ...fns)=>fns.reduce((prevFn, nextFn)=>(value)=>prevFn(nextFn(value)), fn1);
-const sum = compose((x)=>x + 1, (x)=>x + 1);
-console.log(sum(1));
+function flow(...funcs) {
+    const { length  } = funcs;
+    let index = length;
+    while(index--){
+        if (typeof funcs[index] !== 'function') {
+            throw new TypeError('Expected a function');
+        }
+    }
+    return (...args)=>{
+        let i = 0;
+        let result = length ? funcs[i].apply(this, args) : args[0];
+        while(++i < length){
+            result = funcs[i].call(this, result);
+        }
+        return result;
+    };
+}
 
 function _define_property$2(obj, key, value) {
     if (key in obj) {
@@ -119,10 +133,9 @@ const withHookFormMask = (register, mask, options)=>{
     if (register) {
         const { ref  } = register;
         const maskInput = Inputmask(_object_spread$1({
-            mask,
-            jitMasking: true
+            mask: mask || undefined
         }, options));
-        newRef = compose((_ref)=>{
+        newRef = flow((_ref)=>{
             if (_ref) maskInput.mask(_ref);
             return _ref;
         }, ref);
@@ -164,7 +177,7 @@ const withMask = (mask, options)=>(input)=>{
         //
         if (isServer) return input;
         const maskInput = Inputmask(_object_spread({
-            mask
+            mask: mask || undefined
         }, options));
         if (input) {
             maskInput.mask(input);

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/utils.ts","../src/useMaskInput.ts","../src/withHookFormMask.ts","../src/withMask.ts"],"sourcesContent":["export const isServer = !(\n  typeof window !== 'undefined'\n  && window.document\n  && window.document.createElement\n);\n\nexport const pipe = <T extends any[], R>(\n  fn1: (...args: T) => R,\n  ...fns: Array<(a: R) => R>\n) => {\n  const piped = fns.reduce(\n    (prevFn, nextFn) => (value: R) => nextFn(prevFn(value)),\n    (value) => value,\n  );\n  return (...args: T) => piped(fn1(...args));\n};\n\nexport const compose = <R>(\n  fn1: (a: R) => R, ...fns: Array<(a: R) => R>\n) => fns.reduce((prevFn, nextFn) => (value) => prevFn(nextFn(value)), fn1);\n\nconst sum = compose(\n  (x: number) => x + 1,\n  (x: number) => x + 1,\n);\n\nconsole.log(sum(1));\n","import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\nimport { isServer } from './utils';\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  const ref = useRef<HTMLInputElement>(null);\n  if (isServer) return ref;\n\n  useEffect(() => {\n    if (!isServer) {\n      if (!ref.current) return;\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    }\n  }, [mask, register, options]);\n\n  return ref;\n};\n\nexport default useInputMask;\n","import Inputmask from 'inputmask';\n\nimport { compose } from './utils';\nimport { Mask, Options, Register } from './types';\n\nexport const withHookFormMask = (register: Register, mask: Mask, options?: Options) => {\n  //\n  let newRef;\n\n  if (register) {\n    const { ref } = register;\n\n    const maskInput = Inputmask({\n      mask,\n      jitMasking: true,\n      ...options,\n    });\n\n    newRef = compose((_ref: HTMLElement) => {\n      if (_ref) maskInput.mask(_ref);\n      return _ref;\n    }, ref);\n  }\n\n  return {\n    ...register,\n    ref: newRef,\n  };\n};\n","import Inputmask from 'inputmask';\nimport { isServer } from './utils';\nimport { Input, Mask, Options } from './types';\n\nexport const withMask = (mask: Mask, options?: Options) => (input: Input) => {\n  //\n  if (isServer) return input;\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"],"names":["isServer","window","document","createElement","compose","fn1","fns","reduce","prevFn","nextFn","value","sum","x","console","log","useInputMask","props","mask","register","options","ref","useRef","useEffect","current","maskInput","Inputmask","_object_spread","withHookFormMask","newRef","jitMasking","_ref","withMask","input"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../src/utils.ts","../src/useMaskInput.ts","../src/withHookFormMask.ts","../src/withMask.ts"],"sourcesContent":["export const isServer = !(\n  typeof window !== 'undefined'\n  && window.document\n  && window.document.createElement\n);\n\nexport function flow(...funcs: Array<Function>) : Function {\n  const { length } = funcs;\n  let index = length;\n  while (index--) {\n    if (typeof funcs[index] !== 'function') {\n      throw new TypeError('Expected a function');\n    }\n  }\n  return (...args: Array<Function>) => {\n    let i = 0;\n    let result = length ? funcs[i].apply(this, args) : args[0];\n    while (++i < length) {\n      result = funcs[i].call(this, result);\n    }\n    return result;\n  };\n}\n","import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\nimport { isServer } from './utils';\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  const ref = useRef<HTMLInputElement>(null);\n  if (isServer) return ref;\n\n  useEffect(() => {\n    if (!isServer) {\n      if (!ref.current) return;\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    }\n  }, [mask, register, options]);\n\n  return ref;\n};\n\nexport default useInputMask;\n","import Inputmask from 'inputmask';\nimport { RefCallback } from 'react';\nimport { flow } from './utils';\nimport { Mask, Options, Register } from './types';\n\nexport const withHookFormMask = (register: Register, mask: Mask, options?: Options): Register => {\n  //\n  let newRef;\n\n  if (register) {\n    const { ref } = register;\n\n    const maskInput = Inputmask({\n      mask: mask || undefined,\n      ...options,\n    });\n\n    newRef = flow((_ref: HTMLElement) => {\n      if (_ref) maskInput.mask(_ref);\n      return _ref;\n    }, ref) as RefCallback<HTMLElement>;\n  }\n\n  return {\n    ...register,\n    ref: newRef as RefCallback<HTMLElement>,\n  };\n};\n","import Inputmask from 'inputmask';\nimport { isServer } from './utils';\nimport { Input, Mask, Options } from './types';\n\nexport const withMask = (mask?: Mask, options?: Options) => (input: Input) => {\n  //\n  if (isServer) return input;\n\n  const maskInput = Inputmask({\n    mask: mask || undefined,\n    ...options,\n  });\n\n  if (input) {\n    maskInput.mask(input);\n  }\n\n  return input;\n};\n"],"names":["isServer","window","document","createElement","flow","funcs","length","index","TypeError","args","i","result","apply","call","useInputMask","props","mask","register","options","ref","useRef","useEffect","current","maskInput","Inputmask","_object_spread","withHookFormMask","newRef","undefined","_ref","withMask","input"],"mappings":"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"}

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 import * as react from 'react';
 import Inputmask$1 from 'inputmask';
-import * as react_hook_form from 'react-hook-form';
 import { UseFormRegisterReturn } from 'react-hook-form';
 
 interface UseInputMaskOptions {
@@ -15,20 +14,8 @@ type Mask = Inputmask.Options['mask'];
 type Options = Inputmask.Options;
 type Input = HTMLInputElement | HTMLTextAreaElement | HTMLElement | HTMLInputElement | null;
 
-declare const withHookFormMask: (register: Register, mask: Mask, options?: Options) => {
-    ref: ((a: any) => any) | undefined;
-    onChange: react_hook_form.ChangeHandler;
-    onBlur: 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;
-};
+declare const withHookFormMask: (register: Register, mask: Mask, options?: Options) => Register;
 
-declare const withMask: (mask: Mask, options?: Options) => (input: Input) => Input;
+declare const withMask: (mask?: Mask, options?: Options) => (input: Input) => Input;
 
 export { useInputMask as default, withHookFormMask, withMask };

package/dist/index.js

@@ -2,9 +2,23 @@ import { useRef, useEffect } from 'react';
 import Inputmask from 'inputmask';
 
 const isServer = !(typeof window !== 'undefined' && window.document && window.document.createElement);
-const compose = (fn1, ...fns)=>fns.reduce((prevFn, nextFn)=>(value)=>prevFn(nextFn(value)), fn1);
-const sum = compose((x)=>x + 1, (x)=>x + 1);
-console.log(sum(1));
+function flow(...funcs) {
+    const { length  } = funcs;
+    let index = length;
+    while(index--){
+        if (typeof funcs[index] !== 'function') {
+            throw new TypeError('Expected a function');
+        }
+    }
+    return (...args)=>{
+        let i = 0;
+        let result = length ? funcs[i].apply(this, args) : args[0];
+        while(++i < length){
+            result = funcs[i].call(this, result);
+        }
+        return result;
+    };
+}
 
 function _define_property$2(obj, key, value) {
     if (key in obj) {
@@ -115,10 +129,9 @@ const withHookFormMask = (register, mask, options)=>{
     if (register) {
         const { ref  } = register;
         const maskInput = Inputmask(_object_spread$1({
-            mask,
-            jitMasking: true
+            mask: mask || undefined
         }, options));
-        newRef = compose((_ref)=>{
+        newRef = flow((_ref)=>{
             if (_ref) maskInput.mask(_ref);
             return _ref;
         }, ref);
@@ -160,7 +173,7 @@ const withMask = (mask, options)=>(input)=>{
         //
         if (isServer) return input;
         const maskInput = Inputmask(_object_spread({
-            mask
+            mask: mask || undefined
         }, options));
         if (input) {
             maskInput.mask(input);

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/utils.ts","../src/useMaskInput.ts","../src/withHookFormMask.ts","../src/withMask.ts"],"sourcesContent":["export const isServer = !(\n  typeof window !== 'undefined'\n  && window.document\n  && window.document.createElement\n);\n\nexport const pipe = <T extends any[], R>(\n  fn1: (...args: T) => R,\n  ...fns: Array<(a: R) => R>\n) => {\n  const piped = fns.reduce(\n    (prevFn, nextFn) => (value: R) => nextFn(prevFn(value)),\n    (value) => value,\n  );\n  return (...args: T) => piped(fn1(...args));\n};\n\nexport const compose = <R>(\n  fn1: (a: R) => R, ...fns: Array<(a: R) => R>\n) => fns.reduce((prevFn, nextFn) => (value) => prevFn(nextFn(value)), fn1);\n\nconst sum = compose(\n  (x: number) => x + 1,\n  (x: number) => x + 1,\n);\n\nconsole.log(sum(1));\n","import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\nimport { isServer } from './utils';\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  const ref = useRef<HTMLInputElement>(null);\n  if (isServer) return ref;\n\n  useEffect(() => {\n    if (!isServer) {\n      if (!ref.current) return;\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    }\n  }, [mask, register, options]);\n\n  return ref;\n};\n\nexport default useInputMask;\n","import Inputmask from 'inputmask';\n\nimport { compose } from './utils';\nimport { Mask, Options, Register } from './types';\n\nexport const withHookFormMask = (register: Register, mask: Mask, options?: Options) => {\n  //\n  let newRef;\n\n  if (register) {\n    const { ref } = register;\n\n    const maskInput = Inputmask({\n      mask,\n      jitMasking: true,\n      ...options,\n    });\n\n    newRef = compose((_ref: HTMLElement) => {\n      if (_ref) maskInput.mask(_ref);\n      return _ref;\n    }, ref);\n  }\n\n  return {\n    ...register,\n    ref: newRef,\n  };\n};\n","import Inputmask from 'inputmask';\nimport { isServer } from './utils';\nimport { Input, Mask, Options } from './types';\n\nexport const withMask = (mask: Mask, options?: Options) => (input: Input) => {\n  //\n  if (isServer) return input;\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"],"names":["isServer","window","document","createElement","compose","fn1","fns","reduce","prevFn","nextFn","value","sum","x","console","log","useInputMask","props","mask","register","options","ref","useRef","useEffect","current","maskInput","Inputmask","_object_spread","withHookFormMask","newRef","jitMasking","_ref","withMask","input"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/utils.ts","../src/useMaskInput.ts","../src/withHookFormMask.ts","../src/withMask.ts"],"sourcesContent":["export const isServer = !(\n  typeof window !== 'undefined'\n  && window.document\n  && window.document.createElement\n);\n\nexport function flow(...funcs: Array<Function>) : Function {\n  const { length } = funcs;\n  let index = length;\n  while (index--) {\n    if (typeof funcs[index] !== 'function') {\n      throw new TypeError('Expected a function');\n    }\n  }\n  return (...args: Array<Function>) => {\n    let i = 0;\n    let result = length ? funcs[i].apply(this, args) : args[0];\n    while (++i < length) {\n      result = funcs[i].call(this, result);\n    }\n    return result;\n  };\n}\n","import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\nimport { isServer } from './utils';\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  const ref = useRef<HTMLInputElement>(null);\n  if (isServer) return ref;\n\n  useEffect(() => {\n    if (!isServer) {\n      if (!ref.current) return;\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    }\n  }, [mask, register, options]);\n\n  return ref;\n};\n\nexport default useInputMask;\n","import Inputmask from 'inputmask';\nimport { RefCallback } from 'react';\nimport { flow } from './utils';\nimport { Mask, Options, Register } from './types';\n\nexport const withHookFormMask = (register: Register, mask: Mask, options?: Options): Register => {\n  //\n  let newRef;\n\n  if (register) {\n    const { ref } = register;\n\n    const maskInput = Inputmask({\n      mask: mask || undefined,\n      ...options,\n    });\n\n    newRef = flow((_ref: HTMLElement) => {\n      if (_ref) maskInput.mask(_ref);\n      return _ref;\n    }, ref) as RefCallback<HTMLElement>;\n  }\n\n  return {\n    ...register,\n    ref: newRef as RefCallback<HTMLElement>,\n  };\n};\n","import Inputmask from 'inputmask';\nimport { isServer } from './utils';\nimport { Input, Mask, Options } from './types';\n\nexport const withMask = (mask?: Mask, options?: Options) => (input: Input) => {\n  //\n  if (isServer) return input;\n\n  const maskInput = Inputmask({\n    mask: mask || undefined,\n    ...options,\n  });\n\n  if (input) {\n    maskInput.mask(input);\n  }\n\n  return input;\n};\n"],"names":["isServer","window","document","createElement","flow","funcs","length","index","TypeError","args","i","result","apply","call","useInputMask","props","mask","register","options","ref","useRef","useEffect","current","maskInput","Inputmask","_object_spread","withHookFormMask","newRef","undefined","_ref","withMask","input"],"mappings":"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"}

package/package.json

@@ -1,40 +1,40 @@
 {
   "name": "use-mask-input",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "A react Hook for build elegant input masks. Compatible with React Hook Form",
   "author": "eduardoborges",
-  "license": "MIT",
   "repository": "https://github.com/eduardoborges/use-mask-input",
-  "source": "src/index.tsx",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "source": "./src/index.tsx",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     "import": "./dist/index.js",
     "require": "./dist/index.cjs",
     "types": "./dist/index.d.ts"
   },
   "engines": {
-    "node": ">=18",
+    "node": ">=16",
     "npm": ">=7"
   },
   "scripts": {
-    "build": "./scripts.sh build",
-    "lint": "./scripts.sh lint",
-    "test": "./scripts.sh test",
-    "prepare": "./scripts.sh prepare"
+    "build": "./sh build",
+    "dev": "./sh dev",
+    "lint": "./sh lint",
+    "test": "./sh test",
+    "prepare": "./sh prepare",
+    "example": "./sh example"
   },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "inputmask": "5.0.8",
-    "react-hook-form": "^7"
+    "inputmask": "5.0.8"
   },
   "peerDependencies": {
-    "react": ">=16.4 || ^17.0.0 || ^18.0.0",
-    "react-dom": ">=16.4 || ^17.0.0 || ^18.0.0"
+    "react": ">=16.4 || 17 || 18",
+    "react-dom": ">=16.4 || 17 || 18"
   },
   "devDependencies": {
     "@semantic-release/changelog": "6.0.3",
@@ -44,7 +44,7 @@
     "@semantic-release/npm": "10.0.3",
     "@semantic-release/release-notes-generator": "11.0.1",
     "@types/inputmask": "^5.0.3",
-    "@types/node": "18",
+    "@types/node": "16",
     "@types/react": ">=16.4 || ^17.0.0 || ^18.0.0",
     "@types/react-dom": ">=16.4 || ^17.0.0 || ^18.0.0",
     "@typescript-eslint/eslint-plugin": "5.59.2",
@@ -56,6 +56,7 @@
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "react-hook-form": "^7",
     "read-pkg": "^8.0.0",
     "rollup": "^3.21.4",
     "rollup-plugin-dts": "^5.3.0",

package/src/utils.spec.ts

@@ -1,13 +1,14 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import { describe } from 'vitest';
-import { compose } from './utils';
 
-describe('test use_mask_input', (test) => {
-  test('test use-mask-input.flow', ({ expect }) => {
-    const sum = compose(
-      (x: number) => x + 1,
-      (x: number) => x + 1,
-    );
-    expect(sum(1)).toBe(3);
+import { flow } from './utils';
+
+describe('utils', (it) => {
+  it('flow', ({ expect }) => {
+    const res = flow(
+      (a: number) => a + 1,
+      (a:number) => a + 2,
+    )(1);
+
+    expect(res).toBe(4);
   });
 });

package/src/utils.ts

@@ -4,24 +4,20 @@ export const isServer = !(
   && window.document.createElement
 );
 
-export const pipe = <T extends any[], R>(
-  fn1: (...args: T) => R,
-  ...fns: Array<(a: R) => R>
-) => {
-  const piped = fns.reduce(
-    (prevFn, nextFn) => (value: R) => nextFn(prevFn(value)),
-    (value) => value,
-  );
-  return (...args: T) => piped(fn1(...args));
-};
-
-export const compose = <R>(
-  fn1: (a: R) => R, ...fns: Array<(a: R) => R>
-) => fns.reduce((prevFn, nextFn) => (value) => prevFn(nextFn(value)), fn1);
-
-const sum = compose(
-  (x: number) => x + 1,
-  (x: number) => x + 1,
-);
-
-console.log(sum(1));
+export function flow(...funcs: Array<Function>) : Function {
+  const { length } = funcs;
+  let index = length;
+  while (index--) {
+    if (typeof funcs[index] !== 'function') {
+      throw new TypeError('Expected a function');
+    }
+  }
+  return (...args: Array<Function>) => {
+    let i = 0;
+    let result = length ? funcs[i].apply(this, args) : args[0];
+    while (++i < length) {
+      result = funcs[i].call(this, result);
+    }
+    return result;
+  };
+}

package/src/withHookFormMask.ts

@@ -1,9 +1,9 @@
 import Inputmask from 'inputmask';
-
-import { compose } from './utils';
+import { RefCallback } from 'react';
+import { flow } from './utils';
 import { Mask, Options, Register } from './types';
 
-export const withHookFormMask = (register: Register, mask: Mask, options?: Options) => {
+export const withHookFormMask = (register: Register, mask: Mask, options?: Options): Register => {
   //
   let newRef;
 
@@ -11,19 +11,18 @@ export const withHookFormMask = (register: Register, mask: Mask, options?: Optio
     const { ref } = register;
 
     const maskInput = Inputmask({
-      mask,
-      jitMasking: true,
+      mask: mask || undefined,
       ...options,
     });
 
-    newRef = compose((_ref: HTMLElement) => {
+    newRef = flow((_ref: HTMLElement) => {
       if (_ref) maskInput.mask(_ref);
       return _ref;
-    }, ref);
+    }, ref) as RefCallback<HTMLElement>;
   }
 
   return {
     ...register,
-    ref: newRef,
+    ref: newRef as RefCallback<HTMLElement>,
   };
 };

package/src/withMask.ts

@@ -2,12 +2,12 @@ import Inputmask from 'inputmask';
 import { isServer } from './utils';
 import { Input, Mask, Options } from './types';
 
-export const withMask = (mask: Mask, options?: Options) => (input: Input) => {
+export const withMask = (mask?: Mask, options?: Options) => (input: Input) => {
   //
   if (isServer) return input;
 
   const maskInput = Inputmask({
-    mask,
+    mask: mask || undefined,
     ...options,
   });