馃ジ use-mask-input

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

[![npm](https://img.shields.io/npm/v/use-mask-input)](https://www.npmjs.com/package/use-mask-input) [![npm downloads](https://img.shields.io/npm/dw/use-mask-input)](https://www.npmjs.com/package/use-mask-input) [![bundle size](https://img.shields.io/bundlejs/size/use-mask-input?color=green-light)](https://bundlejs.com/?q=use-mask-input) [![codecov](https://codecov.io/gh/eduardoborges/use-mask-input/branch/main/graph/badge.svg?token=8ORAOAUZTP)](https://codecov.io/gh/eduardoborges/use-mask-input) [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/E1E71VQENQ)
--- **[Documentation](http://use-mask-input.eduardoborges.dev)** 路 **[API Reference](http://use-mask-input.eduardoborges.dev/api-reference)** 路 **[TanStack Form](http://use-mask-input.eduardoborges.dev/tanstack-form)** 路 **[Sponsor](https://ko-fi.com/E1E71VQENQ)** ## Install ```sh npm install use-mask-input ``` ## Usage ```tsx import { useMaskInput } from 'use-mask-input'; function PhoneInput() { const ref = useMaskInput({ mask: '(99) 99999-9999' }); return ; } ``` ### 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 (
); } ``` ### With TanStack Form ```tsx 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 (
{ event.preventDefault(); event.stopPropagation(); void form.handleSubmit(); }} > {(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 ; }}
); } ``` ### With Ant Design ```tsx import { Input } from 'antd'; import { useMaskInputAntd } from 'use-mask-input/antd'; function EmailInput() { const ref = useMaskInputAntd({ mask: 'email' }); return ; } ``` ## 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](http://use-mask-input.eduardoborges.dev/tanstack-form). - React Hook Form - Ant Design (`use-mask-input/antd`) - React Final Form - Next.js / SSR ## License MIT