use-mask-input

Input masks for React. Works with plain inputs, React Hook 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('cpf', 'cpf')} />
      <button type="submit">Submit</button>
    </form>
  );
}

With Ant Design

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

function CPFInput() {
  const ref = useMaskInputAntd({ mask: 'cpf' });
  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.
withMask	Non-hook ref callback. Requires React.memo.
withHookFormMask	Non-hook mask for registered fields. 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 (cpf, currency, email, ...)
• Alternator Mask — multiple patterns
• Preprocessing Mask — dynamic masks with functions