{"repo":"eduardoborges/use-mask-input","free":true,"listed":false,"github":"https://github.com/eduardoborges/use-mask-input","clone":"git clone https://github.com/eduardoborges/use-mask-input.git","description":"🥸 A React/Vue Hook for building elegant input masks. Compatible with React Hook Form and Vee Validate.","language":"TypeScript","stars":677,"topics":["form","forms","mask","masking","react","react-hooks","hook"],"license":"MIT","category":"ui-components","readme_excerpt":"🥸 use-mask-input Input masks for React and Vue 3 . Works with React Hook Form, TanStack Form, vee-validate, Ant Design, and plain inputs. --- Documentation · API Reference · TanStack Form · Sponsor Install Usage With React Hook Form With TanStack Form With Ant Design Vue 3 Everything above is React. Vue 3 has its own entry point: The directive In , importing vMaskInput is enough. Vue resolves a vFoo binding to v-foo , so there is no registration step and no plugin. Outside , register it yourself: app.directive('mask-input', vMaskInput) . With v-model v-model works with no extra code. Add autoUnmask and the bound value is the raw one, while the input keeps showing the mask: Without autoUnmask , v-model receives the masked string. Directive order does not matter: v-model before or after v-mask-input behaves identically. Binding null turns masking off and removes any mask already applied, so v-mask-input=\"enabled ? 'cpf' : null\" works as a toggle. With vee-validate No helper, no wrapper. useField plus v-model plus the directive is the whole integration, and handleSubmit receives the unmasked value: With component libraries Put the directive on the component. Vue applies it to the root element and the mask finds the inner input, so PrimeVue, Element Plus and Ant Design Vue work as-is: The composable For imperative reads, or when you want the raw value without autoUnmask : Vue caveats - unmaskedValue() is not reactive. {{ unmaskedValue() }} renders once and never updates, because","default_branch":null,"files":null,"tree":[],"storefront":"/r/eduardoborges","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/eduardoborges/use-mask-input/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}