use-mask-input 3.8.0 → 3.9.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 ## [3.6.0](https://github.com/eduardoborges/use-mask-input/compare/3.5.2...3.6.0) (2026-01-13)
 
+## 3.9.0
+
+### Minor Changes
+
+- 99e7a0a: Add TanStack Form integration: `useTanStackFormMask` and `withTanStackFormMask`, with types `TanStackFormInputProps` and `UseTanStackFormMaskReturn`. Documentation and a `tanstack-form-project` demo app were added; examples favor international-friendly masks (phone, email, postal).
+
 ## 3.8.0
 
 ### Minor Changes

package/README.md

@@ -1,6 +1,6 @@
 <div align="center">
-  <h1>use-mask-input</h1>
-  <p>Input masks for React. Simple, lightweight, and framework-friendly.</p>
+  <h1>🥸 use-mask-input</h1>
+  <p>Input masks for React. Works with React Hook Form, <strong>TanStack Form</strong>, Ant Design, and plain inputs.</p>
 
   [![npm](https://img.shields.io/npm/v/use-mask-input)](https://www.npmjs.com/package/use-mask-input)
   [![npm downloads](https://img.shields.io/npm/dw/use-mask-input)](https://www.npmjs.com/package/use-mask-input)
@@ -12,7 +12,7 @@
 
 ---
 
-**[Documentation](http://use-mask-input.eduardoborges.dev)** · **[API Reference](http://use-mask-input.eduardoborges.dev/api-reference)** · **[Sponsor](https://ko-fi.com/E1E71VQENQ)**
+**[Documentation](http://use-mask-input.eduardoborges.dev)** · **[API Reference](http://use-mask-input.eduardoborges.dev/api-reference)** · **[TanStack Form](http://use-mask-input.eduardoborges.dev/tanstack-form)** · **[Sponsor](https://ko-fi.com/E1E71VQENQ)**
 
 ## Install
 
@@ -44,21 +44,66 @@ function MyForm() {
   return (
     <form onSubmit={handleSubmit(console.log)}>
       <input {...registerWithMask('phone', '(99) 99999-9999')} />
-      <input {...registerWithMask('cpf', 'cpf')} />
+      <input {...registerWithMask('email', 'email')} />
       <button type="submit">Submit</button>
     </form>
   );
 }
 ```
 
+### With TanStack Form
+
+```tsx
+import { useForm } from '@tanstack/react-form';
+import { useTanStackFormMask } from 'use-mask-input';
+
+function MyForm() {
+  const maskField = useTanStackFormMask();
+  const form = useForm({
+    defaultValues: {
+      phone: '',
+    },
+    onSubmit: async ({ value }) => {
+      console.log(value);
+    },
+  });
+
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        void form.handleSubmit();
+      }}
+    >
+      <form.Field name="phone">
+        {(field) => {
+          const inputProps = maskField(
+            '(99) 99999-9999',
+            {
+              name: field.name,
+              value: field.state.value,
+              onBlur: field.handleBlur,
+              onChange: (event) => field.handleChange(event.target.value),
+            },
+          );
+
+          return <input {...inputProps} placeholder="(00) 00000-0000" />;
+        }}
+      </form.Field>
+    </form>
+  );
+}
+```
+
 ### With Ant Design
 
 ```tsx
 import { Input } from 'antd';
 import { useMaskInputAntd } from 'use-mask-input/antd';
 
-function CPFInput() {
-  const ref = useMaskInputAntd({ mask: 'cpf' });
+function EmailInput() {
+  const ref = useMaskInputAntd({ mask: 'email' });
   return <Input ref={ref} />;
 }
 ```
@@ -69,8 +114,10 @@ function CPFInput() {
 |-----|-------------|
 | `useMaskInput` | Hook. Returns a ref callback. Default choice. |
 | `useHookFormMask` | Hook. Wraps React Hook Form's `register`. |
+| `useTanStackFormMask` | Hook. Adds mask to TanStack Form field input props. |
 | `withMask` | Function. Ref callback. Requires `React.memo`. |
 | `withHookFormMask` | Function. Mask for registered fields. Requires `React.memo`. |
+| `withTanStackFormMask` | Function. Mask for TanStack input props. Requires `React.memo`. |
 | `useMaskInputAntd` | Hook. `useMaskInput` for Ant Design. |
 | `useHookFormMaskAntd` | Hook. `useHookFormMask` for Ant Design. |
 
@@ -80,8 +127,9 @@ function CPFInput() {
 
 ## Works With
 
+- **TanStack Form** (`useTanStackFormMask`, `withTanStackFormMask`). See the [TanStack Form guide](http://use-mask-input.eduardoborges.dev/tanstack-form).
 - React Hook Form
-- Ant Design
+- Ant Design (`use-mask-input/antd`)
 - React Final Form
 - Next.js / SSR
 

package/dist/antd.d.cts

@@ -1,7 +1,7 @@
 import { InputRef } from 'antd';
 import { RefCallback } from 'react';
 import { FieldValues, RegisterOptions, UseFormRegister, Path } from 'react-hook-form';
-import { U as UseHookFormMaskReturn, M as Mask, O as Options } from './index-S8txl6uK.cjs';
+import { U as UseHookFormMaskReturn, M as Mask, O as Options } from './index-BoaVtWUr.cjs';
 
 type UseHookFormMaskAntdReturn<T extends FieldValues> = Omit<UseHookFormMaskReturn<T>, 'ref'> & {
     ref: RefCallback<InputRef | null>;

package/dist/antd.d.ts

@@ -1,7 +1,7 @@
 import { InputRef } from 'antd';
 import { RefCallback } from 'react';
 import { FieldValues, RegisterOptions, UseFormRegister, Path } from 'react-hook-form';
-import { U as UseHookFormMaskReturn, M as Mask, O as Options } from './index-S8txl6uK.js';
+import { U as UseHookFormMaskReturn, M as Mask, O as Options } from './index-BoaVtWUr.js';
 
 type UseHookFormMaskAntdReturn<T extends FieldValues> = Omit<UseHookFormMaskReturn<T>, 'ref'> & {
     ref: RefCallback<InputRef | null>;

package/dist/{index-S8txl6uK.d.cts → index-BoaVtWUr.d.cts}

@@ -579,5 +579,14 @@ interface UseHookFormMaskReturn<T extends FieldValues> extends UseFormRegisterRe
     ref: RefCallback<HTMLElement | null>;
     prevRef: RefCallback<HTMLElement | null>;
 }
+interface TanStackFormInputProps {
+    name?: string;
+    ref?: RefCallback<HTMLElement | null>;
+    [key: string]: unknown;
+}
+type UseTanStackFormMaskReturn<T extends TanStackFormInputProps = TanStackFormInputProps> = Omit<T, 'ref'> & {
+    ref: RefCallback<HTMLElement | null>;
+    prevRef: RefCallback<HTMLElement | null> | undefined;
+};
 
-export type { Input as I, Mask as M, Options as O, UseHookFormMaskReturn as U };
+export type { Input as I, Mask as M, Options as O, TanStackFormInputProps as T, UseHookFormMaskReturn as U, UseTanStackFormMaskReturn as a };

package/dist/{index-S8txl6uK.d.ts → index-BoaVtWUr.d.ts}

@@ -579,5 +579,14 @@ interface UseHookFormMaskReturn<T extends FieldValues> extends UseFormRegisterRe
     ref: RefCallback<HTMLElement | null>;
     prevRef: RefCallback<HTMLElement | null>;
 }
+interface TanStackFormInputProps {
+    name?: string;
+    ref?: RefCallback<HTMLElement | null>;
+    [key: string]: unknown;
+}
+type UseTanStackFormMaskReturn<T extends TanStackFormInputProps = TanStackFormInputProps> = Omit<T, 'ref'> & {
+    ref: RefCallback<HTMLElement | null>;
+    prevRef: RefCallback<HTMLElement | null> | undefined;
+};
 
-export type { Input as I, Mask as M, Options as O, UseHookFormMaskReturn as U };
+export type { Input as I, Mask as M, Options as O, TanStackFormInputProps as T, UseHookFormMaskReturn as U, UseTanStackFormMaskReturn as a };

package/dist/index.cjs

@@ -74,8 +74,53 @@ function useHookFormMask(registerFn) {
   }, [registerFn]);
 }
 
-// src/api/withHookFormMask.ts
+// src/api/withTanStackFormMask.ts
 var refCache = /* @__PURE__ */ new WeakMap();
+function withTanStackFormMask(inputProps, mask, options) {
+  const { ref } = inputProps;
+  if (!ref) {
+    const result2 = {
+      ...inputProps,
+      ref: ((input) => {
+        if (input) chunkX5SEJVSB_cjs.applyMaskToElement(input, mask, options);
+      })
+    };
+    chunkX5SEJVSB_cjs.setPrevRef(result2, ref);
+    return result2;
+  }
+  if (!refCache.has(ref)) {
+    refCache.set(ref, /* @__PURE__ */ new Map());
+  }
+  const maskCache = refCache.get(ref);
+  const cacheKey = chunkX5SEJVSB_cjs.makeMaskCacheKey(inputProps.name ?? "", mask);
+  if (!maskCache?.has(cacheKey)) {
+    const applyMaskToRef = (_ref) => {
+      if (_ref) chunkX5SEJVSB_cjs.applyMaskToElement(_ref, mask, options);
+      return _ref;
+    };
+    maskCache?.set(
+      cacheKey,
+      chunkX5SEJVSB_cjs.flow(applyMaskToRef, ref)
+    );
+  }
+  const result = {
+    ...inputProps,
+    ref: maskCache?.get(cacheKey)
+  };
+  chunkX5SEJVSB_cjs.setPrevRef(result, ref);
+  return result;
+}
+
+// src/api/useTanStackFormMask.ts
+function useTanStackFormMask() {
+  return react.useMemo(
+    () => (mask, inputProps, options) => withTanStackFormMask(inputProps, mask, options),
+    []
+  );
+}
+
+// src/api/withHookFormMask.ts
+var refCache2 = /* @__PURE__ */ new WeakMap();
 function withHookFormMask(register, mask, options) {
   const { ref } = register;
   if (!ref) {
@@ -86,10 +131,10 @@ function withHookFormMask(register, mask, options) {
     chunkX5SEJVSB_cjs.setPrevRef(result2, ref);
     return result2;
   }
-  if (!refCache.has(ref)) {
-    refCache.set(ref, /* @__PURE__ */ new Map());
+  if (!refCache2.has(ref)) {
+    refCache2.set(ref, /* @__PURE__ */ new Map());
   }
-  const maskCache = refCache.get(ref);
+  const maskCache = refCache2.get(ref);
   const cacheKey = chunkX5SEJVSB_cjs.makeMaskCacheKey(register.name, mask);
   if (!maskCache?.has(cacheKey)) {
     const applyMaskToRef = (_ref) => {
@@ -115,6 +160,8 @@ Object.defineProperty(exports, "withMask", {
 });
 exports.useHookFormMask = useHookFormMask;
 exports.useMaskInput = useMaskInput;
+exports.useTanStackFormMask = useTanStackFormMask;
 exports.withHookFormMask = withHookFormMask;
+exports.withTanStackFormMask = withTanStackFormMask;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/api/useMaskInput.ts","../src/api/useHookFormMask.ts","../src/api/withHookFormMask.ts"],"names":["useRef","useCallback","resolveInputRef","withMask","useEffect","isServer_default","useLayoutEffect","useMemo","makeMaskCacheKey","applyMaskToElement","flow","setPrevRef","result"],"mappings":"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","file":"index.cjs","sourcesContent":["import {\n  useCallback, useEffect, useRef,\n} from 'react';\n\nimport { resolveInputRef } from '../core';\nimport withMask from './withMask';\nimport isServer from '../utils/isServer';\n\nimport type { Input, Mask, Options } from '../types';\n\ninterface UseMaskInputOptions {\n  mask: Mask;\n  register?: (element: HTMLElement) => void;\n  options?: Options;\n}\n\n/**\n * React hook for applying input masks to form elements.\n * Works with Ant Design and other wrapped components too.\n *\n * @param props - Configuration object\n * @param props.mask - The mask pattern to apply\n * @param props.register - Optional callback that receives the element\n * @param props.options - Optional mask configuration options\n * @returns A ref callback function to attach to the input element\n */\nexport default function useMaskInput(props: UseMaskInputOptions): ((input: Input | null) => void) {\n  const { mask, register, options } = props;\n  const ref = useRef<HTMLInputElement | null>(null);\n  const maskRef = useRef(mask);\n  const optionsRef = useRef(options);\n\n  const refCallback = useCallback((input: Input | null): void => {\n    if (!input) {\n      ref.current = null;\n      return;\n    }\n\n    ref.current = resolveInputRef(input);\n    withMask(maskRef.current, optionsRef.current)(ref.current);\n  }, []);\n\n  useEffect(() => {\n    if (isServer || !ref.current || !register) return;\n    register(ref.current);\n  }, [register]);\n\n  if (isServer) {\n    return (): void => {\n      // server doesn't have dom, so just do nothing\n    };\n  }\n\n  return refCallback;\n}\n","import { useLayoutEffect, useMemo, useRef } from 'react';\n\nimport { applyMaskToElement } from '../core';\nimport { flow, makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { RefCallback } from 'react';\nimport type {\n  FieldValues, Path,\n  RegisterOptions,\n  UseFormRegister,\n} from 'react-hook-form';\n\nimport type { Mask, Options, UseHookFormMaskReturn } from '../types';\n\ninterface CacheEntry {\n  stableRef: RefCallback<HTMLElement | null>;\n  element: HTMLElement | null;\n  latestRHFRef?: RefCallback<HTMLElement | null>;\n  syncedRHFRef?: RefCallback<HTMLElement | null>;\n}\n\n/**\n * Creates a masked version of React Hook Form's register function.\n * Takes react-hook-form's register and adds automatic masking. Like an upgrade.\n *\n * @template T - The form data type\n * @template D - The register options type\n * @param registerFn - The register function from useForm hook\n * @returns A function that registers a field with mask support\n */\nexport default function useHookFormMask<\n  T extends FieldValues, D extends RegisterOptions,\n>(registerFn: UseFormRegister<T>): ((fieldName: Path<T>, mask: Mask, options?: (\n  D & Options) | Options | D) => UseHookFormMaskReturn<T>) {\n  const entryCacheRef = useRef(new Map<string, CacheEntry>());\n\n  useLayoutEffect(() => {\n    entryCacheRef.current.forEach((entry) => {\n      const currentEntry = entry;\n      if (!currentEntry.element || !currentEntry.latestRHFRef) return;\n\n      // After reset(), RHF gives us a new ref callback. React won't call it\n      // because our outward ref identity stays stable, so we replay it here.\n      if (currentEntry.latestRHFRef !== currentEntry.syncedRHFRef) {\n        currentEntry.latestRHFRef(currentEntry.element);\n        currentEntry.syncedRHFRef = currentEntry.latestRHFRef;\n      }\n    });\n  });\n\n  return useMemo(() => {\n    // registerFn identity changed, so drop cached refs bound to the previous\n    // register lifecycle.\n    entryCacheRef.current = new Map<string, CacheEntry>();\n\n    return (fieldName: Path<T>, mask: Mask, options?: (\n      D & Options) | Options | D): UseHookFormMaskReturn<T> => {\n      if (!registerFn) throw new Error('registerFn is required');\n\n      const registerReturn = registerFn(fieldName, options as Options);\n      const { ref } = registerReturn as UseHookFormMaskReturn<T>;\n\n      const cacheKey = makeMaskCacheKey(fieldName, mask);\n\n      let entry = entryCacheRef.current.get(cacheKey);\n      if (!entry) {\n        const nextEntry: CacheEntry = {\n          element: null,\n          latestRHFRef: ref,\n          syncedRHFRef: undefined,\n          stableRef: null as unknown as RefCallback<HTMLElement | null>,\n        };\n\n        const applyMaskToRef = (_ref: HTMLElement | null) => {\n          nextEntry.element = _ref;\n          if (_ref) applyMaskToElement(_ref, mask, options as Options);\n          return _ref;\n        };\n\n        nextEntry.stableRef = (\n          nextEntry.latestRHFRef\n            ? flow(applyMaskToRef, (_ref: HTMLElement | null) => nextEntry.latestRHFRef?.(_ref))\n            : applyMaskToRef\n        ) as RefCallback<HTMLElement | null>;\n\n        entry = nextEntry;\n        entryCacheRef.current.set(cacheKey, nextEntry);\n      } else {\n        entry.latestRHFRef = ref;\n      }\n\n      const result = {\n        ...registerReturn,\n        ref: entry.stableRef,\n      } as UseHookFormMaskReturn<T>;\n\n      setPrevRef(result, ref);\n\n      return result;\n    };\n  }, [registerFn]);\n}\n","import { applyMaskToElement } from '../core';\nimport { flow, makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { RefCallback } from 'react';\nimport type { FieldValues } from 'react-hook-form';\n\nimport type {\n  Mask, Options, UseFormRegisterReturn, UseHookFormMaskReturn,\n} from '../types';\n\nconst refCache = new WeakMap<\n  RefCallback<HTMLElement | null>,\n  Map<string, RefCallback<HTMLElement | null>>\n>();\n\n/**\n * Enhances a React Hook Form register return object with mask support.\n * Takes an already registered field and adds mask to it.\n * Useful when you registered the field before.\n *\n * @param register - The register return object from React Hook Form\n * @param mask - The mask pattern to apply\n * @param options - Optional mask configuration options\n * @returns A new register return object with mask applied\n */\nexport default function withHookFormMask(\n  register: UseFormRegisterReturn,\n  mask: Mask,\n  options?: Options,\n): UseHookFormMaskReturn<FieldValues> {\n  const { ref } = register as UseHookFormMaskReturn<FieldValues>;\n\n  // null ref — nothing to cache, return as-is.\n  if (!ref) {\n    const result = {\n      ...register,\n      ref: null as unknown as RefCallback<HTMLElement | null>,\n    } as UseHookFormMaskReturn<FieldValues>;\n    setPrevRef(result, ref);\n    return result;\n  }\n\n  if (!refCache.has(ref)) {\n    refCache.set(ref, new Map());\n  }\n  const maskCache = refCache.get(ref);\n  const cacheKey = makeMaskCacheKey(register.name, mask);\n\n  if (!maskCache?.has(cacheKey)) {\n    const applyMaskToRef = (_ref: HTMLElement | null) => {\n      if (_ref) applyMaskToElement(_ref, mask, options);\n      return _ref;\n    };\n    maskCache?.set(\n      cacheKey,\n      flow(applyMaskToRef, ref) as RefCallback<HTMLElement | null>,\n    );\n  }\n\n  const result = {\n    ...register,\n    ref: maskCache?.get(cacheKey),\n  } as UseHookFormMaskReturn<FieldValues>;\n\n  setPrevRef(result, ref);\n\n  return result;\n}\n"]}
+{"version":3,"sources":["../src/api/useMaskInput.ts","../src/api/useHookFormMask.ts","../src/api/withTanStackFormMask.ts","../src/api/useTanStackFormMask.ts","../src/api/withHookFormMask.ts"],"names":["useRef","useCallback","resolveInputRef","withMask","useEffect","isServer_default","useLayoutEffect","useMemo","makeMaskCacheKey","applyMaskToElement","flow","setPrevRef","result","refCache"],"mappings":"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","file":"index.cjs","sourcesContent":["import {\n  useCallback, useEffect, useRef,\n} from 'react';\n\nimport { resolveInputRef } from '../core';\nimport withMask from './withMask';\nimport isServer from '../utils/isServer';\n\nimport type { Input, Mask, Options } from '../types';\n\ninterface UseMaskInputOptions {\n  mask: Mask;\n  register?: (element: HTMLElement) => void;\n  options?: Options;\n}\n\n/**\n * React hook for applying input masks to form elements.\n * Works with Ant Design and other wrapped components too.\n *\n * @param props - Configuration object\n * @param props.mask - The mask pattern to apply\n * @param props.register - Optional callback that receives the element\n * @param props.options - Optional mask configuration options\n * @returns A ref callback function to attach to the input element\n */\nexport default function useMaskInput(props: UseMaskInputOptions): ((input: Input | null) => void) {\n  const { mask, register, options } = props;\n  const ref = useRef<HTMLInputElement | null>(null);\n  const maskRef = useRef(mask);\n  const optionsRef = useRef(options);\n\n  const refCallback = useCallback((input: Input | null): void => {\n    if (!input) {\n      ref.current = null;\n      return;\n    }\n\n    ref.current = resolveInputRef(input);\n    withMask(maskRef.current, optionsRef.current)(ref.current);\n  }, []);\n\n  useEffect(() => {\n    if (isServer || !ref.current || !register) return;\n    register(ref.current);\n  }, [register]);\n\n  if (isServer) {\n    return (): void => {\n      // server doesn't have dom, so just do nothing\n    };\n  }\n\n  return refCallback;\n}\n","import { useLayoutEffect, useMemo, useRef } from 'react';\n\nimport { applyMaskToElement } from '../core';\nimport { flow, makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { RefCallback } from 'react';\nimport type {\n  FieldValues, Path,\n  RegisterOptions,\n  UseFormRegister,\n} from 'react-hook-form';\n\nimport type { Mask, Options, UseHookFormMaskReturn } from '../types';\n\ninterface CacheEntry {\n  stableRef: RefCallback<HTMLElement | null>;\n  element: HTMLElement | null;\n  latestRHFRef?: RefCallback<HTMLElement | null>;\n  syncedRHFRef?: RefCallback<HTMLElement | null>;\n}\n\n/**\n * Creates a masked version of React Hook Form's register function.\n * Takes react-hook-form's register and adds automatic masking. Like an upgrade.\n *\n * @template T - The form data type\n * @template D - The register options type\n * @param registerFn - The register function from useForm hook\n * @returns A function that registers a field with mask support\n */\nexport default function useHookFormMask<\n  T extends FieldValues, D extends RegisterOptions,\n>(registerFn: UseFormRegister<T>): ((fieldName: Path<T>, mask: Mask, options?: (\n  D & Options) | Options | D) => UseHookFormMaskReturn<T>) {\n  const entryCacheRef = useRef(new Map<string, CacheEntry>());\n\n  useLayoutEffect(() => {\n    entryCacheRef.current.forEach((entry) => {\n      const currentEntry = entry;\n      if (!currentEntry.element || !currentEntry.latestRHFRef) return;\n\n      // After reset(), RHF gives us a new ref callback. React won't call it\n      // because our outward ref identity stays stable, so we replay it here.\n      if (currentEntry.latestRHFRef !== currentEntry.syncedRHFRef) {\n        currentEntry.latestRHFRef(currentEntry.element);\n        currentEntry.syncedRHFRef = currentEntry.latestRHFRef;\n      }\n    });\n  });\n\n  return useMemo(() => {\n    // registerFn identity changed, so drop cached refs bound to the previous\n    // register lifecycle.\n    entryCacheRef.current = new Map<string, CacheEntry>();\n\n    return (fieldName: Path<T>, mask: Mask, options?: (\n      D & Options) | Options | D): UseHookFormMaskReturn<T> => {\n      if (!registerFn) throw new Error('registerFn is required');\n\n      const registerReturn = registerFn(fieldName, options as Options);\n      const { ref } = registerReturn as UseHookFormMaskReturn<T>;\n\n      const cacheKey = makeMaskCacheKey(fieldName, mask);\n\n      let entry = entryCacheRef.current.get(cacheKey);\n      if (!entry) {\n        const nextEntry: CacheEntry = {\n          element: null,\n          latestRHFRef: ref,\n          syncedRHFRef: undefined,\n          stableRef: null as unknown as RefCallback<HTMLElement | null>,\n        };\n\n        const applyMaskToRef = (_ref: HTMLElement | null) => {\n          nextEntry.element = _ref;\n          if (_ref) applyMaskToElement(_ref, mask, options as Options);\n          return _ref;\n        };\n\n        nextEntry.stableRef = (\n          nextEntry.latestRHFRef\n            ? flow(applyMaskToRef, (_ref: HTMLElement | null) => nextEntry.latestRHFRef?.(_ref))\n            : applyMaskToRef\n        ) as RefCallback<HTMLElement | null>;\n\n        entry = nextEntry;\n        entryCacheRef.current.set(cacheKey, nextEntry);\n      } else {\n        entry.latestRHFRef = ref;\n      }\n\n      const result = {\n        ...registerReturn,\n        ref: entry.stableRef,\n      } as UseHookFormMaskReturn<T>;\n\n      setPrevRef(result, ref);\n\n      return result;\n    };\n  }, [registerFn]);\n}\n","import { applyMaskToElement } from '../core';\nimport { flow, makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { RefCallback } from 'react';\n\nimport type {\n  Mask, Options, TanStackFormInputProps, UseTanStackFormMaskReturn,\n} from '../types';\n\nconst refCache = new WeakMap<\n  RefCallback<HTMLElement | null>,\n  Map<string, RefCallback<HTMLElement | null>>\n>();\n\n/**\n * Enhances TanStack Form-compatible input props with mask support.\n * Works with objects returned by field.getInputProps().\n */\nexport default function withTanStackFormMask<T extends TanStackFormInputProps>(\n  inputProps: T,\n  mask: Mask,\n  options?: Options,\n): UseTanStackFormMaskReturn<T> {\n  const { ref } = inputProps;\n\n  if (!ref) {\n    const result = {\n      ...inputProps,\n      ref: ((input: HTMLElement | null) => {\n        if (input) applyMaskToElement(input, mask, options);\n      }) as RefCallback<HTMLElement | null>,\n    } as unknown as UseTanStackFormMaskReturn<T>;\n\n    setPrevRef(result, ref);\n    return result;\n  }\n\n  if (!refCache.has(ref)) {\n    refCache.set(ref, new Map());\n  }\n\n  const maskCache = refCache.get(ref);\n  const cacheKey = makeMaskCacheKey(inputProps.name ?? '', mask);\n\n  if (!maskCache?.has(cacheKey)) {\n    const applyMaskToRef = (_ref: HTMLElement | null) => {\n      if (_ref) applyMaskToElement(_ref, mask, options);\n      return _ref;\n    };\n\n    maskCache?.set(\n      cacheKey,\n      flow(applyMaskToRef, ref) as RefCallback<HTMLElement | null>,\n    );\n  }\n\n  const result = {\n    ...inputProps,\n    ref: maskCache?.get(cacheKey),\n  } as unknown as UseTanStackFormMaskReturn<T>;\n\n  setPrevRef(result, ref);\n  return result;\n}\n","import { useMemo } from 'react';\n\nimport withTanStackFormMask from './withTanStackFormMask';\n\nimport type { Mask, Options, TanStackFormInputProps, UseTanStackFormMaskReturn } from '../types';\n\n/**\n * Creates a helper to mask TanStack Form-compatible input props.\n * Designed for objects returned by field.getInputProps().\n */\nexport default function useTanStackFormMask(): <T extends TanStackFormInputProps>(\n  mask: Mask,\n  inputProps: T,\n  options?: Options,\n) => UseTanStackFormMaskReturn<T> {\n  return useMemo(\n    () => <T extends TanStackFormInputProps>(\n      mask: Mask,\n      inputProps: T,\n      options?: Options,\n    ): UseTanStackFormMaskReturn<T> => withTanStackFormMask(inputProps, mask, options),\n    [],\n  );\n}\n","import { applyMaskToElement } from '../core';\nimport { flow, makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { RefCallback } from 'react';\nimport type { FieldValues } from 'react-hook-form';\n\nimport type {\n  Mask, Options, UseFormRegisterReturn, UseHookFormMaskReturn,\n} from '../types';\n\nconst refCache = new WeakMap<\n  RefCallback<HTMLElement | null>,\n  Map<string, RefCallback<HTMLElement | null>>\n>();\n\n/**\n * Enhances a React Hook Form register return object with mask support.\n * Takes an already registered field and adds mask to it.\n * Useful when you registered the field before.\n *\n * @param register - The register return object from React Hook Form\n * @param mask - The mask pattern to apply\n * @param options - Optional mask configuration options\n * @returns A new register return object with mask applied\n */\nexport default function withHookFormMask(\n  register: UseFormRegisterReturn,\n  mask: Mask,\n  options?: Options,\n): UseHookFormMaskReturn<FieldValues> {\n  const { ref } = register as UseHookFormMaskReturn<FieldValues>;\n\n  // null ref — nothing to cache, return as-is.\n  if (!ref) {\n    const result = {\n      ...register,\n      ref: null as unknown as RefCallback<HTMLElement | null>,\n    } as UseHookFormMaskReturn<FieldValues>;\n    setPrevRef(result, ref);\n    return result;\n  }\n\n  if (!refCache.has(ref)) {\n    refCache.set(ref, new Map());\n  }\n  const maskCache = refCache.get(ref);\n  const cacheKey = makeMaskCacheKey(register.name, mask);\n\n  if (!maskCache?.has(cacheKey)) {\n    const applyMaskToRef = (_ref: HTMLElement | null) => {\n      if (_ref) applyMaskToElement(_ref, mask, options);\n      return _ref;\n    };\n    maskCache?.set(\n      cacheKey,\n      flow(applyMaskToRef, ref) as RefCallback<HTMLElement | null>,\n    );\n  }\n\n  const result = {\n    ...register,\n    ref: maskCache?.get(cacheKey),\n  } as UseHookFormMaskReturn<FieldValues>;\n\n  setPrevRef(result, ref);\n\n  return result;\n}\n"]}

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { M as Mask, O as Options, I as Input, U as UseHookFormMaskReturn } from './index-S8txl6uK.cjs';
+import { M as Mask, O as Options, I as Input, U as UseHookFormMaskReturn, T as TanStackFormInputProps, a as UseTanStackFormMaskReturn } from './index-BoaVtWUr.cjs';
 import { FieldValues, RegisterOptions, UseFormRegister, Path, UseFormRegisterReturn } from 'react-hook-form';
 export { UseFormRegister, UseFormRegisterReturn } from 'react-hook-form';
 import 'react';
@@ -31,6 +31,12 @@ declare function useMaskInput(props: UseMaskInputOptions): ((input: Input | null
  */
 declare function useHookFormMask<T extends FieldValues, D extends RegisterOptions>(registerFn: UseFormRegister<T>): ((fieldName: Path<T>, mask: Mask, options?: (D & Options) | Options | D) => UseHookFormMaskReturn<T>);
 
+/**
+ * Creates a helper to mask TanStack Form-compatible input props.
+ * Designed for objects returned by field.getInputProps().
+ */
+declare function useTanStackFormMask(): <T extends TanStackFormInputProps>(mask: Mask, inputProps: T, options?: Options) => UseTanStackFormMaskReturn<T>;
+
 /**
  * Higher-order function that creates a ref callback for applying input masks.
  * Simple function to apply mask via ref. No hooks, no drama.
@@ -53,4 +59,10 @@ declare function withMask(mask: Mask, options?: Options): ((input: Input | null)
  */
 declare function withHookFormMask(register: UseFormRegisterReturn, mask: Mask, options?: Options): UseHookFormMaskReturn<FieldValues>;
 
-export { Input, Mask, Options, useHookFormMask, useMaskInput, withHookFormMask, withMask };
+/**
+ * Enhances TanStack Form-compatible input props with mask support.
+ * Works with objects returned by field.getInputProps().
+ */
+declare function withTanStackFormMask<T extends TanStackFormInputProps>(inputProps: T, mask: Mask, options?: Options): UseTanStackFormMaskReturn<T>;
+
+export { Input, Mask, Options, TanStackFormInputProps, UseTanStackFormMaskReturn, useHookFormMask, useMaskInput, useTanStackFormMask, withHookFormMask, withMask, withTanStackFormMask };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { M as Mask, O as Options, I as Input, U as UseHookFormMaskReturn } from './index-S8txl6uK.js';
+import { M as Mask, O as Options, I as Input, U as UseHookFormMaskReturn, T as TanStackFormInputProps, a as UseTanStackFormMaskReturn } from './index-BoaVtWUr.js';
 import { FieldValues, RegisterOptions, UseFormRegister, Path, UseFormRegisterReturn } from 'react-hook-form';
 export { UseFormRegister, UseFormRegisterReturn } from 'react-hook-form';
 import 'react';
@@ -31,6 +31,12 @@ declare function useMaskInput(props: UseMaskInputOptions): ((input: Input | null
  */
 declare function useHookFormMask<T extends FieldValues, D extends RegisterOptions>(registerFn: UseFormRegister<T>): ((fieldName: Path<T>, mask: Mask, options?: (D & Options) | Options | D) => UseHookFormMaskReturn<T>);
 
+/**
+ * Creates a helper to mask TanStack Form-compatible input props.
+ * Designed for objects returned by field.getInputProps().
+ */
+declare function useTanStackFormMask(): <T extends TanStackFormInputProps>(mask: Mask, inputProps: T, options?: Options) => UseTanStackFormMaskReturn<T>;
+
 /**
  * Higher-order function that creates a ref callback for applying input masks.
  * Simple function to apply mask via ref. No hooks, no drama.
@@ -53,4 +59,10 @@ declare function withMask(mask: Mask, options?: Options): ((input: Input | null)
  */
 declare function withHookFormMask(register: UseFormRegisterReturn, mask: Mask, options?: Options): UseHookFormMaskReturn<FieldValues>;
 
-export { Input, Mask, Options, useHookFormMask, useMaskInput, withHookFormMask, withMask };
+/**
+ * Enhances TanStack Form-compatible input props with mask support.
+ * Works with objects returned by field.getInputProps().
+ */
+declare function withTanStackFormMask<T extends TanStackFormInputProps>(inputProps: T, mask: Mask, options?: Options): UseTanStackFormMaskReturn<T>;
+
+export { Input, Mask, Options, TanStackFormInputProps, UseTanStackFormMaskReturn, useHookFormMask, useMaskInput, useTanStackFormMask, withHookFormMask, withMask, withTanStackFormMask };

package/dist/index.js

@@ -73,8 +73,53 @@ function useHookFormMask(registerFn) {
   }, [registerFn]);
 }
 
-// src/api/withHookFormMask.ts
+// src/api/withTanStackFormMask.ts
 var refCache = /* @__PURE__ */ new WeakMap();
+function withTanStackFormMask(inputProps, mask, options) {
+  const { ref } = inputProps;
+  if (!ref) {
+    const result2 = {
+      ...inputProps,
+      ref: ((input) => {
+        if (input) applyMaskToElement(input, mask, options);
+      })
+    };
+    setPrevRef(result2, ref);
+    return result2;
+  }
+  if (!refCache.has(ref)) {
+    refCache.set(ref, /* @__PURE__ */ new Map());
+  }
+  const maskCache = refCache.get(ref);
+  const cacheKey = makeMaskCacheKey(inputProps.name ?? "", mask);
+  if (!maskCache?.has(cacheKey)) {
+    const applyMaskToRef = (_ref) => {
+      if (_ref) applyMaskToElement(_ref, mask, options);
+      return _ref;
+    };
+    maskCache?.set(
+      cacheKey,
+      flow(applyMaskToRef, ref)
+    );
+  }
+  const result = {
+    ...inputProps,
+    ref: maskCache?.get(cacheKey)
+  };
+  setPrevRef(result, ref);
+  return result;
+}
+
+// src/api/useTanStackFormMask.ts
+function useTanStackFormMask() {
+  return useMemo(
+    () => (mask, inputProps, options) => withTanStackFormMask(inputProps, mask, options),
+    []
+  );
+}
+
+// src/api/withHookFormMask.ts
+var refCache2 = /* @__PURE__ */ new WeakMap();
 function withHookFormMask(register, mask, options) {
   const { ref } = register;
   if (!ref) {
@@ -85,10 +130,10 @@ function withHookFormMask(register, mask, options) {
     setPrevRef(result2, ref);
     return result2;
   }
-  if (!refCache.has(ref)) {
-    refCache.set(ref, /* @__PURE__ */ new Map());
+  if (!refCache2.has(ref)) {
+    refCache2.set(ref, /* @__PURE__ */ new Map());
   }
-  const maskCache = refCache.get(ref);
+  const maskCache = refCache2.get(ref);
   const cacheKey = makeMaskCacheKey(register.name, mask);
   if (!maskCache?.has(cacheKey)) {
     const applyMaskToRef = (_ref) => {
@@ -108,6 +153,6 @@ function withHookFormMask(register, mask, options) {
   return result;
 }
 
-export { useHookFormMask, useMaskInput, withHookFormMask };
+export { useHookFormMask, useMaskInput, useTanStackFormMask, withHookFormMask, withTanStackFormMask };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/api/useMaskInput.ts","../src/api/useHookFormMask.ts","../src/api/withHookFormMask.ts"],"names":["useRef","result"],"mappings":"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","file":"index.js","sourcesContent":["import {\n  useCallback, useEffect, useRef,\n} from 'react';\n\nimport { resolveInputRef } from '../core';\nimport withMask from './withMask';\nimport isServer from '../utils/isServer';\n\nimport type { Input, Mask, Options } from '../types';\n\ninterface UseMaskInputOptions {\n  mask: Mask;\n  register?: (element: HTMLElement) => void;\n  options?: Options;\n}\n\n/**\n * React hook for applying input masks to form elements.\n * Works with Ant Design and other wrapped components too.\n *\n * @param props - Configuration object\n * @param props.mask - The mask pattern to apply\n * @param props.register - Optional callback that receives the element\n * @param props.options - Optional mask configuration options\n * @returns A ref callback function to attach to the input element\n */\nexport default function useMaskInput(props: UseMaskInputOptions): ((input: Input | null) => void) {\n  const { mask, register, options } = props;\n  const ref = useRef<HTMLInputElement | null>(null);\n  const maskRef = useRef(mask);\n  const optionsRef = useRef(options);\n\n  const refCallback = useCallback((input: Input | null): void => {\n    if (!input) {\n      ref.current = null;\n      return;\n    }\n\n    ref.current = resolveInputRef(input);\n    withMask(maskRef.current, optionsRef.current)(ref.current);\n  }, []);\n\n  useEffect(() => {\n    if (isServer || !ref.current || !register) return;\n    register(ref.current);\n  }, [register]);\n\n  if (isServer) {\n    return (): void => {\n      // server doesn't have dom, so just do nothing\n    };\n  }\n\n  return refCallback;\n}\n","import { useLayoutEffect, useMemo, useRef } from 'react';\n\nimport { applyMaskToElement } from '../core';\nimport { flow, makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { RefCallback } from 'react';\nimport type {\n  FieldValues, Path,\n  RegisterOptions,\n  UseFormRegister,\n} from 'react-hook-form';\n\nimport type { Mask, Options, UseHookFormMaskReturn } from '../types';\n\ninterface CacheEntry {\n  stableRef: RefCallback<HTMLElement | null>;\n  element: HTMLElement | null;\n  latestRHFRef?: RefCallback<HTMLElement | null>;\n  syncedRHFRef?: RefCallback<HTMLElement | null>;\n}\n\n/**\n * Creates a masked version of React Hook Form's register function.\n * Takes react-hook-form's register and adds automatic masking. Like an upgrade.\n *\n * @template T - The form data type\n * @template D - The register options type\n * @param registerFn - The register function from useForm hook\n * @returns A function that registers a field with mask support\n */\nexport default function useHookFormMask<\n  T extends FieldValues, D extends RegisterOptions,\n>(registerFn: UseFormRegister<T>): ((fieldName: Path<T>, mask: Mask, options?: (\n  D & Options) | Options | D) => UseHookFormMaskReturn<T>) {\n  const entryCacheRef = useRef(new Map<string, CacheEntry>());\n\n  useLayoutEffect(() => {\n    entryCacheRef.current.forEach((entry) => {\n      const currentEntry = entry;\n      if (!currentEntry.element || !currentEntry.latestRHFRef) return;\n\n      // After reset(), RHF gives us a new ref callback. React won't call it\n      // because our outward ref identity stays stable, so we replay it here.\n      if (currentEntry.latestRHFRef !== currentEntry.syncedRHFRef) {\n        currentEntry.latestRHFRef(currentEntry.element);\n        currentEntry.syncedRHFRef = currentEntry.latestRHFRef;\n      }\n    });\n  });\n\n  return useMemo(() => {\n    // registerFn identity changed, so drop cached refs bound to the previous\n    // register lifecycle.\n    entryCacheRef.current = new Map<string, CacheEntry>();\n\n    return (fieldName: Path<T>, mask: Mask, options?: (\n      D & Options) | Options | D): UseHookFormMaskReturn<T> => {\n      if (!registerFn) throw new Error('registerFn is required');\n\n      const registerReturn = registerFn(fieldName, options as Options);\n      const { ref } = registerReturn as UseHookFormMaskReturn<T>;\n\n      const cacheKey = makeMaskCacheKey(fieldName, mask);\n\n      let entry = entryCacheRef.current.get(cacheKey);\n      if (!entry) {\n        const nextEntry: CacheEntry = {\n          element: null,\n          latestRHFRef: ref,\n          syncedRHFRef: undefined,\n          stableRef: null as unknown as RefCallback<HTMLElement | null>,\n        };\n\n        const applyMaskToRef = (_ref: HTMLElement | null) => {\n          nextEntry.element = _ref;\n          if (_ref) applyMaskToElement(_ref, mask, options as Options);\n          return _ref;\n        };\n\n        nextEntry.stableRef = (\n          nextEntry.latestRHFRef\n            ? flow(applyMaskToRef, (_ref: HTMLElement | null) => nextEntry.latestRHFRef?.(_ref))\n            : applyMaskToRef\n        ) as RefCallback<HTMLElement | null>;\n\n        entry = nextEntry;\n        entryCacheRef.current.set(cacheKey, nextEntry);\n      } else {\n        entry.latestRHFRef = ref;\n      }\n\n      const result = {\n        ...registerReturn,\n        ref: entry.stableRef,\n      } as UseHookFormMaskReturn<T>;\n\n      setPrevRef(result, ref);\n\n      return result;\n    };\n  }, [registerFn]);\n}\n","import { applyMaskToElement } from '../core';\nimport { flow, makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { RefCallback } from 'react';\nimport type { FieldValues } from 'react-hook-form';\n\nimport type {\n  Mask, Options, UseFormRegisterReturn, UseHookFormMaskReturn,\n} from '../types';\n\nconst refCache = new WeakMap<\n  RefCallback<HTMLElement | null>,\n  Map<string, RefCallback<HTMLElement | null>>\n>();\n\n/**\n * Enhances a React Hook Form register return object with mask support.\n * Takes an already registered field and adds mask to it.\n * Useful when you registered the field before.\n *\n * @param register - The register return object from React Hook Form\n * @param mask - The mask pattern to apply\n * @param options - Optional mask configuration options\n * @returns A new register return object with mask applied\n */\nexport default function withHookFormMask(\n  register: UseFormRegisterReturn,\n  mask: Mask,\n  options?: Options,\n): UseHookFormMaskReturn<FieldValues> {\n  const { ref } = register as UseHookFormMaskReturn<FieldValues>;\n\n  // null ref — nothing to cache, return as-is.\n  if (!ref) {\n    const result = {\n      ...register,\n      ref: null as unknown as RefCallback<HTMLElement | null>,\n    } as UseHookFormMaskReturn<FieldValues>;\n    setPrevRef(result, ref);\n    return result;\n  }\n\n  if (!refCache.has(ref)) {\n    refCache.set(ref, new Map());\n  }\n  const maskCache = refCache.get(ref);\n  const cacheKey = makeMaskCacheKey(register.name, mask);\n\n  if (!maskCache?.has(cacheKey)) {\n    const applyMaskToRef = (_ref: HTMLElement | null) => {\n      if (_ref) applyMaskToElement(_ref, mask, options);\n      return _ref;\n    };\n    maskCache?.set(\n      cacheKey,\n      flow(applyMaskToRef, ref) as RefCallback<HTMLElement | null>,\n    );\n  }\n\n  const result = {\n    ...register,\n    ref: maskCache?.get(cacheKey),\n  } as UseHookFormMaskReturn<FieldValues>;\n\n  setPrevRef(result, ref);\n\n  return result;\n}\n"]}
+{"version":3,"sources":["../src/api/useMaskInput.ts","../src/api/useHookFormMask.ts","../src/api/withTanStackFormMask.ts","../src/api/useTanStackFormMask.ts","../src/api/withHookFormMask.ts"],"names":["useRef","result","useMemo","refCache"],"mappings":"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","file":"index.js","sourcesContent":["import {\n  useCallback, useEffect, useRef,\n} from 'react';\n\nimport { resolveInputRef } from '../core';\nimport withMask from './withMask';\nimport isServer from '../utils/isServer';\n\nimport type { Input, Mask, Options } from '../types';\n\ninterface UseMaskInputOptions {\n  mask: Mask;\n  register?: (element: HTMLElement) => void;\n  options?: Options;\n}\n\n/**\n * React hook for applying input masks to form elements.\n * Works with Ant Design and other wrapped components too.\n *\n * @param props - Configuration object\n * @param props.mask - The mask pattern to apply\n * @param props.register - Optional callback that receives the element\n * @param props.options - Optional mask configuration options\n * @returns A ref callback function to attach to the input element\n */\nexport default function useMaskInput(props: UseMaskInputOptions): ((input: Input | null) => void) {\n  const { mask, register, options } = props;\n  const ref = useRef<HTMLInputElement | null>(null);\n  const maskRef = useRef(mask);\n  const optionsRef = useRef(options);\n\n  const refCallback = useCallback((input: Input | null): void => {\n    if (!input) {\n      ref.current = null;\n      return;\n    }\n\n    ref.current = resolveInputRef(input);\n    withMask(maskRef.current, optionsRef.current)(ref.current);\n  }, []);\n\n  useEffect(() => {\n    if (isServer || !ref.current || !register) return;\n    register(ref.current);\n  }, [register]);\n\n  if (isServer) {\n    return (): void => {\n      // server doesn't have dom, so just do nothing\n    };\n  }\n\n  return refCallback;\n}\n","import { useLayoutEffect, useMemo, useRef } from 'react';\n\nimport { applyMaskToElement } from '../core';\nimport { flow, makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { RefCallback } from 'react';\nimport type {\n  FieldValues, Path,\n  RegisterOptions,\n  UseFormRegister,\n} from 'react-hook-form';\n\nimport type { Mask, Options, UseHookFormMaskReturn } from '../types';\n\ninterface CacheEntry {\n  stableRef: RefCallback<HTMLElement | null>;\n  element: HTMLElement | null;\n  latestRHFRef?: RefCallback<HTMLElement | null>;\n  syncedRHFRef?: RefCallback<HTMLElement | null>;\n}\n\n/**\n * Creates a masked version of React Hook Form's register function.\n * Takes react-hook-form's register and adds automatic masking. Like an upgrade.\n *\n * @template T - The form data type\n * @template D - The register options type\n * @param registerFn - The register function from useForm hook\n * @returns A function that registers a field with mask support\n */\nexport default function useHookFormMask<\n  T extends FieldValues, D extends RegisterOptions,\n>(registerFn: UseFormRegister<T>): ((fieldName: Path<T>, mask: Mask, options?: (\n  D & Options) | Options | D) => UseHookFormMaskReturn<T>) {\n  const entryCacheRef = useRef(new Map<string, CacheEntry>());\n\n  useLayoutEffect(() => {\n    entryCacheRef.current.forEach((entry) => {\n      const currentEntry = entry;\n      if (!currentEntry.element || !currentEntry.latestRHFRef) return;\n\n      // After reset(), RHF gives us a new ref callback. React won't call it\n      // because our outward ref identity stays stable, so we replay it here.\n      if (currentEntry.latestRHFRef !== currentEntry.syncedRHFRef) {\n        currentEntry.latestRHFRef(currentEntry.element);\n        currentEntry.syncedRHFRef = currentEntry.latestRHFRef;\n      }\n    });\n  });\n\n  return useMemo(() => {\n    // registerFn identity changed, so drop cached refs bound to the previous\n    // register lifecycle.\n    entryCacheRef.current = new Map<string, CacheEntry>();\n\n    return (fieldName: Path<T>, mask: Mask, options?: (\n      D & Options) | Options | D): UseHookFormMaskReturn<T> => {\n      if (!registerFn) throw new Error('registerFn is required');\n\n      const registerReturn = registerFn(fieldName, options as Options);\n      const { ref } = registerReturn as UseHookFormMaskReturn<T>;\n\n      const cacheKey = makeMaskCacheKey(fieldName, mask);\n\n      let entry = entryCacheRef.current.get(cacheKey);\n      if (!entry) {\n        const nextEntry: CacheEntry = {\n          element: null,\n          latestRHFRef: ref,\n          syncedRHFRef: undefined,\n          stableRef: null as unknown as RefCallback<HTMLElement | null>,\n        };\n\n        const applyMaskToRef = (_ref: HTMLElement | null) => {\n          nextEntry.element = _ref;\n          if (_ref) applyMaskToElement(_ref, mask, options as Options);\n          return _ref;\n        };\n\n        nextEntry.stableRef = (\n          nextEntry.latestRHFRef\n            ? flow(applyMaskToRef, (_ref: HTMLElement | null) => nextEntry.latestRHFRef?.(_ref))\n            : applyMaskToRef\n        ) as RefCallback<HTMLElement | null>;\n\n        entry = nextEntry;\n        entryCacheRef.current.set(cacheKey, nextEntry);\n      } else {\n        entry.latestRHFRef = ref;\n      }\n\n      const result = {\n        ...registerReturn,\n        ref: entry.stableRef,\n      } as UseHookFormMaskReturn<T>;\n\n      setPrevRef(result, ref);\n\n      return result;\n    };\n  }, [registerFn]);\n}\n","import { applyMaskToElement } from '../core';\nimport { flow, makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { RefCallback } from 'react';\n\nimport type {\n  Mask, Options, TanStackFormInputProps, UseTanStackFormMaskReturn,\n} from '../types';\n\nconst refCache = new WeakMap<\n  RefCallback<HTMLElement | null>,\n  Map<string, RefCallback<HTMLElement | null>>\n>();\n\n/**\n * Enhances TanStack Form-compatible input props with mask support.\n * Works with objects returned by field.getInputProps().\n */\nexport default function withTanStackFormMask<T extends TanStackFormInputProps>(\n  inputProps: T,\n  mask: Mask,\n  options?: Options,\n): UseTanStackFormMaskReturn<T> {\n  const { ref } = inputProps;\n\n  if (!ref) {\n    const result = {\n      ...inputProps,\n      ref: ((input: HTMLElement | null) => {\n        if (input) applyMaskToElement(input, mask, options);\n      }) as RefCallback<HTMLElement | null>,\n    } as unknown as UseTanStackFormMaskReturn<T>;\n\n    setPrevRef(result, ref);\n    return result;\n  }\n\n  if (!refCache.has(ref)) {\n    refCache.set(ref, new Map());\n  }\n\n  const maskCache = refCache.get(ref);\n  const cacheKey = makeMaskCacheKey(inputProps.name ?? '', mask);\n\n  if (!maskCache?.has(cacheKey)) {\n    const applyMaskToRef = (_ref: HTMLElement | null) => {\n      if (_ref) applyMaskToElement(_ref, mask, options);\n      return _ref;\n    };\n\n    maskCache?.set(\n      cacheKey,\n      flow(applyMaskToRef, ref) as RefCallback<HTMLElement | null>,\n    );\n  }\n\n  const result = {\n    ...inputProps,\n    ref: maskCache?.get(cacheKey),\n  } as unknown as UseTanStackFormMaskReturn<T>;\n\n  setPrevRef(result, ref);\n  return result;\n}\n","import { useMemo } from 'react';\n\nimport withTanStackFormMask from './withTanStackFormMask';\n\nimport type { Mask, Options, TanStackFormInputProps, UseTanStackFormMaskReturn } from '../types';\n\n/**\n * Creates a helper to mask TanStack Form-compatible input props.\n * Designed for objects returned by field.getInputProps().\n */\nexport default function useTanStackFormMask(): <T extends TanStackFormInputProps>(\n  mask: Mask,\n  inputProps: T,\n  options?: Options,\n) => UseTanStackFormMaskReturn<T> {\n  return useMemo(\n    () => <T extends TanStackFormInputProps>(\n      mask: Mask,\n      inputProps: T,\n      options?: Options,\n    ): UseTanStackFormMaskReturn<T> => withTanStackFormMask(inputProps, mask, options),\n    [],\n  );\n}\n","import { applyMaskToElement } from '../core';\nimport { flow, makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { RefCallback } from 'react';\nimport type { FieldValues } from 'react-hook-form';\n\nimport type {\n  Mask, Options, UseFormRegisterReturn, UseHookFormMaskReturn,\n} from '../types';\n\nconst refCache = new WeakMap<\n  RefCallback<HTMLElement | null>,\n  Map<string, RefCallback<HTMLElement | null>>\n>();\n\n/**\n * Enhances a React Hook Form register return object with mask support.\n * Takes an already registered field and adds mask to it.\n * Useful when you registered the field before.\n *\n * @param register - The register return object from React Hook Form\n * @param mask - The mask pattern to apply\n * @param options - Optional mask configuration options\n * @returns A new register return object with mask applied\n */\nexport default function withHookFormMask(\n  register: UseFormRegisterReturn,\n  mask: Mask,\n  options?: Options,\n): UseHookFormMaskReturn<FieldValues> {\n  const { ref } = register as UseHookFormMaskReturn<FieldValues>;\n\n  // null ref — nothing to cache, return as-is.\n  if (!ref) {\n    const result = {\n      ...register,\n      ref: null as unknown as RefCallback<HTMLElement | null>,\n    } as UseHookFormMaskReturn<FieldValues>;\n    setPrevRef(result, ref);\n    return result;\n  }\n\n  if (!refCache.has(ref)) {\n    refCache.set(ref, new Map());\n  }\n  const maskCache = refCache.get(ref);\n  const cacheKey = makeMaskCacheKey(register.name, mask);\n\n  if (!maskCache?.has(cacheKey)) {\n    const applyMaskToRef = (_ref: HTMLElement | null) => {\n      if (_ref) applyMaskToElement(_ref, mask, options);\n      return _ref;\n    };\n    maskCache?.set(\n      cacheKey,\n      flow(applyMaskToRef, ref) as RefCallback<HTMLElement | null>,\n    );\n  }\n\n  const result = {\n    ...register,\n    ref: maskCache?.get(cacheKey),\n  } as UseHookFormMaskReturn<FieldValues>;\n\n  setPrevRef(result, ref);\n\n  return result;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-mask-input",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "private": false,
   "description": "A react Hook for build elegant input masks. Compatible with React Hook Form",
   "author": "Eduardo Borges<euduardoborges@gmail.com>",
@@ -42,18 +42,18 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/inputmask": "5.0.7",
-    "@types/node": "25",
+    "@types/node": "^25.5.0",
     "@types/react": ">=19",
     "@types/react-dom": ">=19",
-    "@vitest/coverage-v8": "4.0.18",
-    "antd": "^6.3.2",
-    "oxlint": "1.53.0",
+    "@vitest/coverage-v8": "4.1.1",
+    "antd": "^6.3.4",
+    "oxlint": "1.57.0",
     "inputmask": "5.0.10-beta.61",
     "jsdom": "^28.1.0",
-    "react-hook-form": "7.71.2",
+    "react-hook-form": "7.72.0",
     "tsup": "8.5.1",
     "typescript": "5.9",
-    "vitest": "4.0.18"
+    "vitest": "4.1.1"
   },
   "scripts": {
     "build": "tsup",

package/src/api/index.ts

@@ -1,4 +1,6 @@
 export { default as useMaskInput } from './useMaskInput';
 export { default as useHookFormMask } from './useHookFormMask';
+export { default as useTanStackFormMask } from './useTanStackFormMask';
 export { default as withMask } from './withMask';
 export { default as withHookFormMask } from './withHookFormMask';
+export { default as withTanStackFormMask } from './withTanStackFormMask';

package/src/api/useTanStackFormMask.ts

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+
+import withTanStackFormMask from './withTanStackFormMask';
+
+import type { Mask, Options, TanStackFormInputProps, UseTanStackFormMaskReturn } from '../types';
+
+/**
+ * Creates a helper to mask TanStack Form-compatible input props.
+ * Designed for objects returned by field.getInputProps().
+ */
+export default function useTanStackFormMask(): <T extends TanStackFormInputProps>(
+  mask: Mask,
+  inputProps: T,
+  options?: Options,
+) => UseTanStackFormMaskReturn<T> {
+  return useMemo(
+    () => <T extends TanStackFormInputProps>(
+      mask: Mask,
+      inputProps: T,
+      options?: Options,
+    ): UseTanStackFormMaskReturn<T> => withTanStackFormMask(inputProps, mask, options),
+    [],
+  );
+}

package/src/api/withTanStackFormMask.spec.ts

@@ -0,0 +1,76 @@
+import inputmask from 'inputmask';
+import {
+  beforeEach,
+  describe, expect, it, vi,
+} from 'vitest';
+
+import withTanStackFormMask from './withTanStackFormMask';
+
+import type { TanStackFormInputProps } from '../types';
+
+vi.mock('inputmask', () => ({
+  default: vi.fn((options) => ({
+    mask: vi.fn(),
+    options,
+  })),
+}));
+
+describe('withTanStackFormMask', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('returns masked input props with stable structure', () => {
+    const inputProps: TanStackFormInputProps = {
+      name: 'cpf',
+      ref: vi.fn(),
+      onBlur: vi.fn(),
+      onChange: vi.fn(),
+      value: '',
+    };
+
+    const result = withTanStackFormMask(inputProps, 'cpf');
+
+    expect(typeof result.ref).toBe('function');
+    expect(result.onBlur).toBe(inputProps.onBlur);
+    expect(result.onChange).toBe(inputProps.onChange);
+    expect(result.name).toBe('cpf');
+  });
+
+  it('applies mask when ref callback receives an input', () => {
+    const maskFn = vi.fn();
+    vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as any);
+
+    const input = document.createElement('input');
+    const originalRef = vi.fn();
+    const inputProps: TanStackFormInputProps = {
+      name: 'phone',
+      ref: originalRef,
+      onBlur: vi.fn(),
+      onChange: vi.fn(),
+      value: '',
+    };
+
+    const result = withTanStackFormMask(inputProps, '(99) 99999-9999');
+    result.ref(input);
+
+    expect(maskFn).toHaveBeenCalled();
+    expect(originalRef).toHaveBeenCalledWith(input);
+  });
+
+  it('keeps ref cache stable for same ref and mask', () => {
+    const originalRef = vi.fn();
+    const inputProps: TanStackFormInputProps = {
+      name: 'cpf',
+      ref: originalRef,
+      onBlur: vi.fn(),
+      onChange: vi.fn(),
+      value: '',
+    };
+
+    const first = withTanStackFormMask(inputProps, 'cpf');
+    const second = withTanStackFormMask(inputProps, 'cpf');
+
+    expect(first.ref).toBe(second.ref);
+  });
+});

package/src/api/withTanStackFormMask.ts

@@ -0,0 +1,64 @@
+import { applyMaskToElement } from '../core';
+import { flow, makeMaskCacheKey, setPrevRef } from '../utils';
+
+import type { RefCallback } from 'react';
+
+import type {
+  Mask, Options, TanStackFormInputProps, UseTanStackFormMaskReturn,
+} from '../types';
+
+const refCache = new WeakMap<
+  RefCallback<HTMLElement | null>,
+  Map<string, RefCallback<HTMLElement | null>>
+>();
+
+/**
+ * Enhances TanStack Form-compatible input props with mask support.
+ * Works with objects returned by field.getInputProps().
+ */
+export default function withTanStackFormMask<T extends TanStackFormInputProps>(
+  inputProps: T,
+  mask: Mask,
+  options?: Options,
+): UseTanStackFormMaskReturn<T> {
+  const { ref } = inputProps;
+
+  if (!ref) {
+    const result = {
+      ...inputProps,
+      ref: ((input: HTMLElement | null) => {
+        if (input) applyMaskToElement(input, mask, options);
+      }) as RefCallback<HTMLElement | null>,
+    } as unknown as UseTanStackFormMaskReturn<T>;
+
+    setPrevRef(result, ref);
+    return result;
+  }
+
+  if (!refCache.has(ref)) {
+    refCache.set(ref, new Map());
+  }
+
+  const maskCache = refCache.get(ref);
+  const cacheKey = makeMaskCacheKey(inputProps.name ?? '', mask);
+
+  if (!maskCache?.has(cacheKey)) {
+    const applyMaskToRef = (_ref: HTMLElement | null) => {
+      if (_ref) applyMaskToElement(_ref, mask, options);
+      return _ref;
+    };
+
+    maskCache?.set(
+      cacheKey,
+      flow(applyMaskToRef, ref) as RefCallback<HTMLElement | null>,
+    );
+  }
+
+  const result = {
+    ...inputProps,
+    ref: maskCache?.get(cacheKey),
+  } as unknown as UseTanStackFormMaskReturn<T>;
+
+  setPrevRef(result, ref);
+  return result;
+}

package/src/core/maskEngine.spec.ts

@@ -5,6 +5,12 @@ import {
 
 import { applyMaskToElement, createMaskInstance } from './maskEngine';
 
+type MaskInstance = ReturnType<typeof createMaskInstance>;
+
+function stubMaskInstance(maskFn: ReturnType<typeof vi.fn>): MaskInstance {
+  return { mask: maskFn } as unknown as MaskInstance;
+}
+
 vi.mock('inputmask', () => ({
   default: vi.fn((options) => ({
     mask: vi.fn(),
@@ -47,7 +53,7 @@ describe('maskEngine', () => {
     it('applies mask to input element', () => {
       const input = document.createElement('input');
       const maskFn = vi.fn();
-      vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as unknown as Inputmask.Instance);
+      vi.mocked(inputmask).mockImplementation(() => stubMaskInstance(maskFn));
 
       applyMaskToElement(input, '999-999');
 
@@ -57,7 +63,7 @@ describe('maskEngine', () => {
     it('applies mask to textarea element', () => {
       const textarea = document.createElement('textarea');
       const maskFn = vi.fn();
-      vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as unknown as Inputmask.Instance);
+      vi.mocked(inputmask).mockImplementation(() => stubMaskInstance(maskFn));
 
       applyMaskToElement(textarea, '999-999');
 
@@ -69,7 +75,7 @@ describe('maskEngine', () => {
       const input = document.createElement('input');
       wrapper.appendChild(input);
       const maskFn = vi.fn();
-      vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as unknown as Inputmask.Instance);
+      vi.mocked(inputmask).mockImplementation(() => stubMaskInstance(maskFn));
 
       applyMaskToElement(wrapper, '999-999');
 
@@ -79,7 +85,7 @@ describe('maskEngine', () => {
     it('applies mask to wrapper if no input found inside', () => {
       const wrapper = document.createElement('div');
       const maskFn = vi.fn();
-      vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as unknown as Inputmask.Instance);
+      vi.mocked(inputmask).mockImplementation(() => stubMaskInstance(maskFn));
 
       applyMaskToElement(wrapper, '999-999');
 
@@ -88,7 +94,7 @@ describe('maskEngine', () => {
 
     it('does nothing if element is null', () => {
       const maskFn = vi.fn();
-      vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as unknown as Inputmask.Instance);
+      vi.mocked(inputmask).mockImplementation(() => stubMaskInstance(maskFn));
 
       applyMaskToElement(null as unknown as HTMLElement, '999-999');
 
@@ -98,7 +104,7 @@ describe('maskEngine', () => {
     it('applies mask with custom options', () => {
       const input = document.createElement('input');
       const maskFn = vi.fn();
-      vi.mocked(inputmask).mockReturnValue({ mask: maskFn } as unknown as Inputmask.Instance);
+      vi.mocked(inputmask).mockImplementation(() => stubMaskInstance(maskFn));
 
       applyMaskToElement(input, '999-999', { placeholder: '_' });
 

package/src/index.tsx

@@ -1,14 +1,18 @@
 export {
   useHookFormMask,
   useMaskInput,
+  useTanStackFormMask,
   withHookFormMask,
   withMask,
+  withTanStackFormMask,
 } from './api';
 
 export type {
   Input,
   Mask,
   Options,
+  TanStackFormInputProps,
+  UseTanStackFormMaskReturn,
   UseFormRegister,
   UseFormRegisterReturn,
 } from './types';

package/src/types/index.ts

@@ -36,3 +36,15 @@ export interface UseHookFormMaskReturn<
   ref: RefCallback<HTMLElement | null>;
   prevRef: RefCallback<HTMLElement | null>;
 }
+
+export interface TanStackFormInputProps {
+  name?: string;
+  ref?: RefCallback<HTMLElement | null>;
+  [key: string]: unknown;
+}
+
+export type UseTanStackFormMaskReturn<T extends TanStackFormInputProps = TanStackFormInputProps> =
+  Omit<T, 'ref'> & {
+  ref: RefCallback<HTMLElement | null>;
+  prevRef: RefCallback<HTMLElement | null> | undefined;
+};