v3 · React 19 ready

Stop fighting with input masks in React. 🤯

A tiny hook for elegant input masking. Works with plain inputs, shadcn/ui, React Hook Form, TanStack Form, and Ant Design.

$npm install use-mask-input

Get started API reference GitHub

// drop-in

Copy. Paste. Mask.

One hook, predictable refs, and a familiar API. No wrapper components, no custom inputs to learn.

basic.tsx
import { useMaskInput } from 'use-mask-input';

function PhoneInput() {
  const ref = useMaskInput({ mask: '(99) 99999-9999' });
  return <input ref={ref} />;
}

with-react-hook-form.tsx
import { useForm } from 'react-hook-form';
import { useHookFormMask } from 'use-mask-input';

function MyForm() {
  const { register, handleSubmit } = useForm();
  const registerWithMask = useHookFormMask(register);

  return (
    <form onSubmit={handleSubmit(console.log)}>
      <input {...registerWithMask('phone', '(99) 99999-9999')} />
      <input {...registerWithMask('email', 'email')} />
      <button type="submit">Submit</button>
    </form>
  );
}

// why

Built for the boring parts.

Lightweight

A thin React layer over Inputmask — the only runtime dependency. No wrappers, no extra abstractions.

Composable

Plain refs, React Hook Form, TanStack Form, Ant Design — pick any.

Typed

First-class TypeScript. Mask presets, options, and refs all inferred.

Accessible

Native input under the hood — screen readers, autofill, validation just work.

// sponsors

This spot is empty.

use-mask-input is maintained on nights and weekends. If it saves your team time, consider sponsoring — your logo lives right here, and you help keep the project alive.

Become a sponsor Star on GitHub

weekly downloads

min + gzip

github stars

first class