@code-forge/react-input-mask - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/hook/useInputMask.d.ts

@@ -7,3 +7,3 @@ import type { KeyboardEvent } from "react";
     numRegex?: RegExp;
-    value?: string;
+    value?: HTMLInputElement["value"];
     type?: "raw" | "mask";
@@ -14,10 +14,11 @@ }
 export declare function useInputMask({ mask, placeholderChar, type, value, charRegex, numRegex, }: UseInputMaskProps): {
-    value?: undefined;
-} | {
-    value: string;
-} | {
-    value: string;
-    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    getInputProps: () => {
+        value?: undefined;
+        onKeyDown?: undefined;
+    } | {
+        value: string;
+        onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    };
 };
 export {};
 //# sourceMappingURL=useInputMask.d.ts.map

dist/index.js

@@ -1,5 +0,5 @@
-import { useRef as _, useLayoutEffect as j, useEffect as O, useMemo as X, useState as R } from "react";
-const $ = typeof window < "u", b = $ ? j : O, h = () => {
-  const t = _();
-  return b(() => {
+import { useRef as K, useLayoutEffect as O, useEffect as X, useMemo as $, useState as R } from "react";
+const b = typeof window < "u", h = b ? O : X, z = () => {
+  const t = K();
+  return h(() => {
     t.current && (t.current(), t.current = void 0);
@@ -9,3 +9,3 @@ }), (n) => {
   };
-}, A = (t, e = P) => e.test(t), k = (t, e = U) => e.test(t), z = (t) => t === "*", M = (t) => t === "A" || t === "9" || t === "*", B = (t, e) => {
+}, A = (t, e = L) => e.test(t), I = (t, e = P) => e.test(t), B = (t) => t === "*", M = (t) => t === "A" || t === "9" || t === "*", F = (t, e) => {
   let n = 0;
@@ -16,17 +16,18 @@ return t.split("").map((r) => {
     const u = e[n];
-    return u && (r === "*" || r === "A" && A(e[n]) || r === "9" && k(e[n])) ? (n += 1, u) : r;
+    return u && (r === "*" || r === "A" && A(e[n]) || r === "9" && I(e[n])) ? (n += 1, u) : r;
   }).join("");
-}, y = (t, e, n = 0) => t.slice(0, n) + t.slice(n, t.length).replaceAll("*", e).replaceAll("A", e).replaceAll("9", e), F = (t, e) => {
+}, k = (t, e, n = 0) => t.slice(0, n) + t.slice(n, t.length).replaceAll("*", e).replaceAll("A", e).replaceAll("9", e), H = (t, e) => {
   let n = 0;
   return t.split("").filter((s) => n >= e ? !1 : M(s) ? (n += 1, !1) : !0).length;
-}, S = (t, e, n) => {
-  const s = B(e, t), r = F(e, t.length);
-  return y(s, n, t.length + r);
-}, T = ({ filteredMask: t, value: e, rawValue: n, currentMaskChar: s, charRegex: r, numRegex: u }) => e.length > 1 || t.length === n.length ? !1 : L(e, s, r, u), L = (t, e, n, s) => !!(A(t, n) && A(e, n) || k(t, s) && k(e, s) || z(e)), H = (t, e) => t.selectionStart === 0 && t.selectionEnd === e.length, N = (t, e) => {
-  t.value = e;
+}, D = (t, e, n) => {
+  const s = F(e, t), r = H(e, t.length);
+  return k(s, n, t.length + r);
+}, S = ({ filteredMask: t, value: e, rawValue: n, currentMaskChar: s, charRegex: r, numRegex: u }) => e.length > 1 || t.length === n.length ? !1 : T(e, s, r, u), T = (t, e, n, s) => !!(A(t, n) && A(e, n) || I(t, s) && I(e, s) || B(e)), N = (t, e) => t.selectionStart === 0 && t.selectionEnd === e.length, Z = (t, e) => {
+  if (t.value = e, typeof document > "u")
+    return;
   const n = document.createEvent("HTMLEvents");
   n.initEvent("change", !0, !1), t.dispatchEvent(n);
-}, Z = (t = "", e = "", n, s, r) => {
+}, q = (t = "", e = "", n, s, r) => {
   const u = {
-    maskValue: y(t, r),
+    maskValue: k(t, r),
     rawValue: ""
@@ -36,17 +37,17 @@ };
     return u;
-  const c = t.replace(/[^A9*]+/g, "");
-  return e.split("").every((i, f) => T({
-    value: i,
-    currentMaskChar: c[f],
+  const i = t.replace(/[^A9*]+/g, "");
+  return e.split("").every((c, f) => S({
+    value: c,
+    currentMaskChar: i[f],
     charRegex: n,
     numRegex: s,
-    filteredMask: c,
+    filteredMask: i,
     rawValue: e.slice(0, f)
   })) ? {
-    maskValue: S(e, t, r),
+    maskValue: D(e, t, r),
     rawValue: e
   } : u;
-}, q = (t, e, n, s, r) => {
+}, J = (t, e, n, s, r) => {
   const u = {
-    maskValue: y(t, r),
+    maskValue: k(t, r),
     rawValue: ""
@@ -56,57 +57,52 @@ };
     return u;
-  const c = t.split("");
-  if (c.every((l, i) => M(l) ? L(e[i], l, n, s) : l === e[i])) {
-    const l = c.map((i, f) => M(i) ? e[f] : "").join("");
+  const i = t.split("");
+  if (i.every((l, c) => M(l) ? T(e[c], l, n, s) : l === e[c])) {
+    const l = i.map((c, f) => M(c) ? e[f] : "").join("");
     return { maskValue: e, rawValue: l };
   }
   return u;
-}, J = (t = "", e = "", n, s, r, u) => n === "mask" ? q(t, e, s, r, u) : Z(t, e, s, r, u), P = /^[a-zA-Z]*$/, U = /^[0-9]*$/;
-function x({ mask: t, placeholderChar: e = "_", type: n = "raw", value: s, charRegex: r = P, numRegex: u = U }) {
-  const c = /[^A9*]+/g, g = t == null ? void 0 : t.replace(c, ""), l = h(), { maskValue: i, rawValue: f } = X(() => J(t, s, n, r, u, e), [t, s, n, r, u, e]), [V, W] = R(f), [I, v] = R(i);
-  if (!t)
-    return {};
-  if (typeof document > "u")
-    return { value: I };
-  const D = (o, a, d) => {
-    W(o);
-    const p = S(o, t, e);
-    v(p);
-    const w = n === "raw" ? o : p;
-    N(d.target, w), l(() => {
-      const E = p.indexOf(e);
-      a.setSelectionRange(E, E);
+}, Q = (t = "", e = "", n, s, r, u) => n === "mask" ? J(t, e, s, r, u) : q(t, e, s, r, u), L = /^[a-zA-Z]*$/, P = /^[0-9]*$/;
+function x({ mask: t = "", placeholderChar: e = "_", type: n = "raw", value: s, charRegex: r = L, numRegex: u = P }) {
+  const i = /[^A9*]+/g, g = t == null ? void 0 : t.replace(i, ""), l = z(), { maskValue: c, rawValue: f } = $(() => Q(t, s, n, r, u, e), [t, s, n, r, u, e]), [V, U] = R(f), [W, G] = R(c), y = (o, a, d) => {
+    U(o);
+    const p = D(o, t, e);
+    G(p);
+    const E = n === "raw" ? o : p;
+    Z(d.target, E), l(() => {
+      const w = p.indexOf(e);
+      a.setSelectionRange(w, w);
     });
+  }, _ = (o) => {
+    const a = o.key, d = o.target, p = V.length, E = g[p];
+    if (o.ctrlKey && o.key.toLowerCase() === "a") {
+      o.preventDefault(), d.setSelectionRange(0, t.length);
+      return;
+    }
+    if (a === "Tab" || a === "Enter")
+      return;
+    if (o.preventDefault(), a === "Backspace" && V.length > 0) {
+      const v = N(d, t) ? "" : V.slice(0, -1);
+      return y(v, d, o);
+    }
+    if (!S({
+      value: a,
+      currentMaskChar: E,
+      charRegex: r,
+      numRegex: u,
+      filteredMask: g,
+      rawValue: V
+    }))
+      return;
+    const j = V + a;
+    y(j, d, o);
   };
-  return { ...{
-    value: I,
-    onKeyDown: (o) => {
-      const a = o.key, d = o.target, p = V.length, w = g[p];
-      if (o.ctrlKey && o.key.toLowerCase() === "a") {
-        o.preventDefault(), d.setSelectionRange(0, t.length);
-        return;
-      }
-      if (a === "Tab" || a === "Enter")
-        return;
-      if (o.preventDefault(), a === "Backspace" && V.length > 0) {
-        const K = H(d, t) ? "" : V.slice(0, -1);
-        return D(K, d, o);
-      }
-      if (!T({
-        value: a,
-        currentMaskChar: w,
-        charRegex: r,
-        numRegex: u,
-        filteredMask: g,
-        rawValue: V
-      }))
-        return;
-      const G = V + a;
-      D(G, d, o);
-    }
-  } };
+  return { getInputProps: () => t ? {
+    value: W,
+    onKeyDown: _
+  } : {} };
 }
 export {
-  U as DIGIT_REGEX,
-  P as LETTER_REGEX,
+  P as DIGIT_REGEX,
+  L as LETTER_REGEX,
   x as useInputMask
 };

package.json

 {
   "name": "@code-forge/react-input-mask",
-  "description": "React input mask hook",
+  "description": "React input mask used to mask input fields on the fly.",
   "author": "Alem Tuzlak",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "license": "MIT",
@@ -64,2 +64,2 @@ "keywords": [
   }
-}
+}

README.md

@@ -40,5 +40,5 @@ # React Input Mask
 const MyComponent = () => {
-  const inputProps = useInputMask({ mask: '+[phone]' });
+  const { getInputProps } = useInputMask({ mask: 'One does not simply walk into AAAAAA' });
   return (
-    <input name="phone" {...inputProps} onChange={e => {
+    <input name="phone" {...getInputProps()} onChange={e => {
       // Your onChange handler gets the output of the hook (won't trigger if the input is invalid)
@@ -74,2 +74,3 @@ console.log(e.target.value);
 ## Examples
+
 ### Phone Number
@@ -81,5 +82,5 @@ ```jsx
 const MyComponent = () => {
-  const inputProps = useInputMask({ mask: '+[phone]' });
+  const { getInputProps } = useInputMask({ mask: '+[phone]' });
   return (
-    <input name="phone" {...inputProps} />
+    <input name="phone" {...getInputProps()} />
   );
@@ -95,5 +96,5 @@ };
 const MyComponent = () => {
-  const inputProps = useInputMask({ mask: '999-99-9999' });
+  const { getInputProps } = useInputMask({ mask: '999-99-9999' });
   return (
-    <input name="ssn" {...inputProps} />
+    <input name="ssn" {...getInputProps()} />
   );
@@ -109,5 +110,5 @@ };
 const MyComponent = () => {
-  const inputProps = useInputMask({ mask: '9999 9999 9999 9999' });
+  const { getInputProps } = useInputMask({ mask: '9999 9999 9999 9999' });
   return (
-    <input name="cc" {...inputProps} />
+    <input name="cc" {...getInputProps()} />
   );
@@ -117,2 +118,19 @@ };
 
+### Handle keyDown before the mask
+```jsx
+import React from 'react';
+import { useInputMask } from 'react-input-mask';
+
+const MyComponent = () => {
+  const { getInputProps } = useInputMask({ mask: '9999 9999 9999 9999' });
+  const maskProps = getInputProps();
+  return (
+    <input name="cc" onKeyDown={e => { 
+      // do something
+      maskProps.onKeyDown(e);
+    }} value={maskProps.value} />
+  );
+};
+```
+
 ### Usage with react-hook-form
@@ -127,6 +145,6 @@
   const { register, handleSubmit } = useForm();
-  const inputProps = useInputMask({ mask: '9999 9999 9999 9999' });
+  const { getInputProps } = useInputMask({ mask: '9999 9999 9999 9999' });
   return (
     <form onSubmit={handleSubmit(data => console.log(data))}>
-      <input {...register('cc')} {...inputProps} />
+      <input {...register('cc')} {...getInputProps()} />
       <button type="submit">Submit</button>
@@ -133,0 +151,0 @@ </form>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21828

increased by2.71%

Number of lines in readme file

170

increased by11.84%

Worsened metrics

Lines of code

177

decreased by-1.67%

No dependency changes