Documentation · API Reference · TanStack Form · Sponsor

Install

npm install use-mask-input

Usage

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

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

APIs

| API | Description | |-----|-------------| | 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. |

Built-in Aliases

cpf · cnpj · br-bank-account · br-bank-agency · currency · brl-currency · datetime · email · numeric · decimal · integer · percentage · url · ip · mac · ssn

Works With

• TanStack Form (useTanStackFormMask, withTanStackFormMask). See the TanStack Form guide.
• React Hook Form
• Ant Design (use-mask-input/antd)
• React Final Form
• Next.js / SSR

License

MIT