Input masks for React. Works with React Hook Form, TanStack Form, Ant Design, and plain inputs.
Documentation 路 API Reference 路 TanStack Form 路 Sponsor
npm install use-mask-inputimport { useMaskInput } from 'use-mask-input';
function PhoneInput() {
const ref = useMaskInput({ mask: '(99) 99999-9999' });
return <input ref={ref} />;
}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>
);
}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>
);
}import { Input } from 'antd';
import { useMaskInputAntd } from 'use-mask-input/antd';
function EmailInput() {
const ref = useMaskInputAntd({ mask: 'email' });
return <Input ref={ref} />;
}| 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. |
formatWithMask |
Function. Formats a raw value using a mask, without a mounted element. |
unformatWithMask |
Function. Removes the mask from a formatted value, without a mounted element. |
cpf 路 cnpj 路 br-bank-account 路 br-bank-agency 路 currency 路 brl-currency 路 datetime 路 email 路 numeric 路 decimal 路 integer 路 percentage 路 url 路 ip 路 mac 路 ssn
- TanStack Form (
useTanStackFormMask,withTanStackFormMask). See the TanStack Form guide. - React Hook Form
- Ant Design (
use-mask-input/antd) - React Final Form
- Next.js / SSR
MIT