use-mask-input

Input masks for React. Works with plain inputs, React Hook Form, TanStack Form, and Ant Design.

npm install use-mask-input

import { useMaskInput } from 'use-mask-input';

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

With React Hook Form

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>
  );
}

With TanStack Form

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>
  );
}

See the full TanStack Form Integration guide.

With Ant Design

import { Input } from 'antd';
import { useMaskInputAntd } from 'use-mask-input/antd';

function EmailInput() {
  const ref = useMaskInputAntd({ mask: 'email' });
  return <Input ref={ref} />;
}

See the full Ant Design Integration guide.

APIs

API	When to use
useMaskInput	Default choice. Returns a ref callback.
useHookFormMask	Wraps React Hook Form's register.
useTanStackFormMask	Wraps TanStack Form input props with mask support.
withMask	Non-hook ref callback. Requires React.memo.
withHookFormMask	Non-hook mask for registered fields. Requires React.memo.
withTanStackFormMask	Non-hook mask for TanStack input props. Requires React.memo.
useMaskInputAntd	useMaskInput for Ant Design.
useHookFormMaskAntd	useHookFormMask for Ant Design.

Full signatures and parameters in the API Reference.

Mask Types

• Static Mask: fixed patterns like 999-999
• Dynamic Mask: variable-length patterns
• Optional Mask: masks with optional parts
• Alias Mask: built-in presets (email, currency, datetime, ...)
• Alternator Mask: multiple patterns
• Preprocessing Mask: dynamic masks with functions