feat: up

package.json

@@ -6,7 +6,7 @@
     "react",
     "typescript"
   ],
-  "version": "2.1.15",
+  "version": "2.1.16",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",
@@ -57,6 +57,7 @@
     "@types/react": "^18.0.23",
     "@types/react-dom": "^18.0.7",
     "@types/styled-components": "^5.1.26",
+    "@types/vanilla-masker": "^1.2.1",
     "@typescript-eslint/eslint-plugin": "^5.40.0",
     "@typescript-eslint/parser": "^5.40.0",
     "babel-loader": "^8.2.5",
@@ -114,7 +115,8 @@
     "react-select": "^5.5.6",
     "scheduler": "^0.23.0",
     "slugify": "^1.6.5",
-    "styled-components": "^5.3.6"
+    "styled-components": "^5.3.6",
+    "vanilla-masker": "^1.2.0"
   },
   "resolutions": {
     "@types/react": "^18.0.23",

src/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useOnClickOutside'
+export * from './useMask'

src/hooks/useMask.ts

@@ -0,0 +1,54 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-param-reassign */
+import { useCallback, useMemo } from 'react'
+
+import VMasker from 'vanilla-masker'
+
+export const useMask = (customPattern: string) => {
+  const pattern = useMemo(() => customPattern, [customPattern])
+
+  const ref = useCallback(
+    (instance: any) => {
+      VMasker(instance).maskPattern(pattern)
+    },
+    [pattern]
+  )
+
+  const refWrapper = useCallback(
+    (currentRef: any) => {
+      if (currentRef && typeof currentRef === 'object') {
+        return (instance: any) => {
+          currentRef.current = instance
+        }
+      }
+
+      if (currentRef && typeof currentRef === 'function') {
+        return (instance: any) => {
+          if (instance) {
+            VMasker(instance).maskPattern(pattern)
+
+            currentRef(instance)
+          }
+        }
+      }
+
+      return undefined
+    },
+    [pattern]
+  )
+
+  const refWrapperFromObject = useCallback(
+    (object: any) => {
+      const { ref: currentRef, ...rest } = object
+
+      return { ref: refWrapper(ref), ...rest }
+    },
+    [ref, refWrapper]
+  )
+
+  return {
+    ref,
+    refWrapper,
+    refWrapperFromObject,
+  }
+}

yarn.lock

@@ -3290,6 +3290,11 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
   integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
 
+"@types/vanilla-masker@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@types/vanilla-masker/-/vanilla-masker-1.2.1.tgz#5eb024a7ee9d5e9e2caf7e61cb07c37a80c74445"
+  integrity sha512-b5ajZhEff5Ymf0znJ6ReHd4RIzZxb8QORD52/gC9qiG1wgBG+uraJbOgIXIyn4/OLOko/bmDajXuxn2WnYD3ew==
+
 "@types/webpack-env@^1.16.0":
   version "1.16.3"
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.16.3.tgz#b776327a73e561b71e7881d0cd6d34a1424db86a"
@@ -13112,6 +13117,11 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+vanilla-masker@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/vanilla-masker/-/vanilla-masker-1.2.0.tgz#c2830e9d994a5fecd2261506477c2707fe589756"
+  integrity sha512-5SQeksiWaRYfbTaLVcqDPlvINGRt7ODbmWqqMMdT4GuZEC01KJm7FxaytscI5GZ9mlkTNQDwqllSHbv1ENxQEA==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"