A react-input-mask alternative for React 19

react-input-mask is archived, its last release came out in 2018, and on React 19 it throws "findDOMNode is not a function" before the field appears. Below is a small mask hook to paste in its place, and a finished card form if the mask was for card numbers.

One payment$3

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

A mask hook for React 19, no package needed

lib/use-mask.ts

"use client";
import { useLayoutEffect, useRef, useState, type ChangeEvent } from "react";

// In the pattern, 9 is one digit. Any other character is typed for you
// once the digits reach it: "(999) 999-9999", "99/99/9999", "9999 9999 9999 9999".
export function formatMask(raw: string, mask: string) {
  const digits = raw.replace(/\D/g, "");
  let out = "";
  let d = 0;
  for (const ch of mask) {
    if (d >= digits.length) break;
    out += ch === "9" ? digits[d++] : ch;
  }
  return out;
}

export function useMask(mask: string, initial = "") {
  const ref = useRef<HTMLInputElement>(null);
  // caret travels with the value, so a keystroke that changes nothing still re-renders
  const [state, setState] = useState(() => ({ value: formatMask(initial, mask), caret: -1 }));

  useLayoutEffect(() => {
    const el = ref.current;
    if (el && state.caret >= 0 && document.activeElement === el) el.setSelectionRange(state.caret, state.caret);
  }, [state]);

  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
    const raw = e.target.value;
    const pos = e.target.selectionStart ?? raw.length;
    const digitsBefore = raw.slice(0, pos).replace(/\D/g, "").length;
    const value = formatMask(raw, mask);
    // put the caret right after the same digit it followed before formatting
    let caret = 0;
    for (let seen = 0; caret < value.length && seen < digitsBefore; caret++) {
      if (/\d/.test(value[caret])) seen++;
    }
    setState({ value, caret });
  };

  return {
    inputProps: { ref, value: state.value, onChange },
    digits: state.value.replace(/\D/g, ""),
    complete: state.value.length === mask.length,
  };
}

app/signup/contact-fields.tsx

"use client";
// Before:
// import InputMask from "react-input-mask";
// <InputMask mask="(999) 999-9999" value={phone} onChange={(e) => setPhone(e.target.value)} />
import { useMask } from "@/lib/use-mask";

export default function ContactFields() {
  const phone = useMask("(999) 999-9999");
  const birthday = useMask("99/99/9999");

  return (
    <div className="grid gap-3">
      <label className="grid gap-1 text-sm">
        Phone
        <input {...phone.inputProps} name="phone" inputMode="tel" autoComplete="tel" placeholder="(555) 123-4567" className="rounded-md border px-3 py-2" />
      </label>
      <label className="grid gap-1 text-sm">
        Birthday
        <input {...birthday.inputProps} name="birthday" inputMode="numeric" placeholder="MM/DD/YYYY" className="rounded-md border px-3 py-2" />
      </label>
      {/* phone.digits is "5551234567": send that, not the formatted text */}
      <input type="hidden" name="phoneDigits" value={phone.digits} />
    </div>
  );
}

Good to know

Where react-input-mask stands: npm's latest is 2.0.4, from September 1, 2018. The next tag, 3.0.0-alpha.2, is from January 2020. The GitHub repo (sanniassin/react-input-mask) is archived. npm still counted 357,249 downloads in the week of October 16 to 22, 2026.
Why it breaks on React 19: 2.0.4 and the 3.0 alpha both call findDOMNode to reach the input, and React 19 removed it. On October 26, 2026 we rendered <InputMask mask="9999 9999 9999 9999"> with React 19.2.9: it threw "reactDom.findDOMNode is not a function" and nothing rendered. The same code on React 18.3.1 rendered the input, with a deprecation warning. Its peer range is react >=0.14.0, so npm installs it without a word.
How the hook works: in the pattern, 9 is one digit and every other character is typed for you as the digits reach it. The caret stays right after the digit you typed, even when a space or a bracket lands in front of it. Backspace right after a space or dash steps over it, and the next Backspace deletes the digit before it.
It only takes digits. A pasted "+1 555 123 4567" keeps the 1 as the first digit, so strip a country code before formatMask if people paste numbers. For letters, currency or dynamic patterns, a maintained package is the better fit: @react-input/mask 2.0.4 (December 2024) lists React 19 in its peer range, and react-imask 7.6.1 accepts any React from 0.14 up. We didn't test either on React 19.
Send digits, not the formatted text. The hook returns digits ("5551234567") and complete, which turns true once the pattern is full.
Type-checked on October 26, 2026 with TypeScript 5.9.3 against react 19.1.1 and next 15.5.28; the card snippet against @stripe/react-stripe-js 7.0.0, @stripe/stripe-js 10.1.0 and the shipped CardCheckout.tsx; the shadcn version against the new-york-v4 Input. We also ran the formatting and caret logic on its own for typing, Backspace, inserts and paste.

If the mask was for a card number

A card number mask is usually one part of a bigger job: format the digits, guess the brand, check the number, then do the same for the expiry and CVC. Credit Card Checkout V1 is that whole form. Its built-in inputs group the number in fours, add the slash in MM/YY, keep the CVC to digits, run a Luhn check on 16-digit numbers and spot Visa and Mastercard, while a 3D card fills in as you type and flips for the CVC.
Those built-in inputs are for demos and tests. For real payments, Stripe's card fields go into the renderCardFields slot, as below. Stripe formats its own fields, so the card number needs no mask pattern at all, and the digits never reach your code.
The card has Visa and Mastercard artwork. Other brands Stripe reports, like Amex, show the card without a logo.

The full Stripe setup, step by step

app/pay/checkout.tsx

"use client";
import { useRef } from "react";
import { loadStripe } from "@stripe/stripe-js";
import { Elements, CardNumberElement, CardExpiryElement, CardCvcElement, useStripe, useElements } from "@stripe/react-stripe-js";
import CardCheckout from "@/components/CardCheckout";

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!);
const style = { base: { color: "#F4F2FF", fontSize: "18px" } };

function CardForm({ clientSecret }: { clientSecret: string }) {
  const stripe = useStripe();
  const elements = useElements();
  const done = useRef({ number: false, expiry: false, cvc: false }).current;

  return (
    <CardCheckout
      amount={49}
      currency="USD"
      renderCardFields={(slot) => {
        // Stripe formats these fields itself: no mask pattern for the card number, expiry or CVC
        const track = (k: keyof typeof done) => (e: { complete: boolean; brand?: string }) => {
          done[k] = e.complete;
          slot.onChange({ complete: done.number && done.expiry && done.cvc, ...(e.brand ? { brand: e.brand } : {}) });
        };
        return (
          <div className="grid gap-[15px]">
            <div className={slot.fieldClassName}><CardNumberElement options={{ style }} onChange={track("number")} /></div>
            <div className={slot.fieldClassName}><CardExpiryElement options={{ style }} onChange={track("expiry")} /></div>
            <div className={slot.fieldClassName}>
              <CardCvcElement options={{ style }} onChange={track("cvc")} onFocus={() => slot.onChange({ focus: "cvc" })} onBlur={() => slot.onChange({ focus: null })} />
            </div>
          </div>
        );
      }}
      onConfirm={async ({ name }) => {
        const card = elements?.getElement(CardNumberElement);
        if (!stripe || !card) throw new Error("Stripe hasn't loaded yet.");
        const { error } = await stripe.confirmCardPayment(clientSecret, { payment_method: { card, billing_details: { name } } });
        if (error) throw error;
      }}
    />
  );
}

export default function Checkout({ clientSecret }: { clientSecret: string }) {
  return (
    <Elements stripe={stripePromise} options={{ clientSecret }}>
      <CardForm clientSecret={clientSecret} />
    </Elements>
  );
}

react-text-mask alternative

react-text-mask is a different case. It still rendered on React 19 in our test. Its last release, 5.5.0, is from October 1, 2022, and its peer range stops at React 18, so npm refuses it next to React 19 unless you pass --legacy-peer-deps. npm counted 257,282 downloads in the week of October 16 to 22, 2026.
If that flag is the only thing bothering you, it's a peer range problem, not a crash. The hook above replaces the common cases (a fixed pattern of digits and literals) without the flag. Its mask={[...]} arrays with regexes map to a pattern string where each digit slot is 9.

shadcn input mask

shadcn's Input is a plain <input> with classes, and on React 19 it takes ref as a normal prop. So the hook's inputProps (ref, value, onChange) go straight onto it, with no wrapper library.
The component below adds aria-invalid while the pattern is half full, which shadcn's Input already styles with its red ring.
Need a card number field for shadcn/ui? The page linked below has one, with a brand badge and a Luhn check.

A card number field for shadcn/ui

components/masked-input.tsx

"use client";
import type { ComponentProps } from "react";
import { Input } from "@/components/ui/input";
import { useMask } from "@/lib/use-mask";

// shadcn's Input passes every prop through to <input>, ref included on React 19,
// so the hook's props go straight onto it.
export function MaskedInput({ mask, ...props }: { mask: string } & Omit<ComponentProps<typeof Input>, "value" | "onChange" | "ref">) {
  const field = useMask(mask);
  return <Input {...props} {...field.inputProps} inputMode="numeric" aria-invalid={field.digits.length > 0 && !field.complete ? true : undefined} />;
}

// <MaskedInput mask="(999) 999-9999" name="phone" placeholder="(555) 123-4567" />

Install

Copy from the zipPut react/src/components into src/, then none for the hook. The card form needs framer-motion. Then npm uninstall react-input-mask.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

renderCardFields: Stripe's card fields inside the design
onConfirm: confirm with Stripe; throw to show the error
onPay: demos and tests only: the built-in inputs' values
amount / currency: what the card shows

How qodesign compares

qodesign vs 21st.dev21st.dev is best for: browsing a huge marketplace and copying many components a month.
qodesign vs Skiper UISkiper UI is best for: unusual interaction details for landing pages: image reveals, cursor trails, tooltips, drag-and-scroll galleries.

All comparisons, with prices read on each library's own site.

From the blog: Credit Card Input in React: Spacing, Brand and Luhn

From the blog: findDOMNode Is Not a Function in React 19: Find It, Fix It

Questions

Does react-input-mask work with React 19?

No. 2.0.4 and the 3.0 alpha both call findDOMNode, which React 19 removed. In our test it threw "reactDom.findDOMNode is not a function" and rendered nothing. It still works on React 18, with a deprecation warning.

Will --legacy-peer-deps fix it?

No. npm installs react-input-mask without complaint, because its peer range is react >=0.14.0. The crash happens when the field mounts.

Is react-input-mask deprecated?

npm doesn't mark it deprecated, but the GitHub repo is archived and the last stable release is from September 2018.

Do I need a mask for Stripe card fields?

No. Stripe's card number, expiry and CVC fields format themselves. A mask only matters for your own inputs, like phone numbers and dates.

Does the card form work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.