/ React
@maskito/react is a light-weighted library to use Maskito in an React-way.
To get the most out of this guide, you should review the topic "Core Concepts" first.
Getting Started
Install libraries
and use Maskito
See the result of above code example in action:
Controlled masked input
Maskito core is developed as framework-agnostic library. It does not depend on any JS-framework's peculiarities. It uses only native browser API. That is why you should use native onInput instead of React-specific onChange event. Do not worry, both events works similarly! Read more about it in the official React documentation.
Merge Maskito ref with the third-party ref
Do you need to use multiple hooks that return refs which both should be attached to the masked textfield?
Use ref callback !
Query nested input element
Pass a predicate to elementPredicate to find input element for you, if you do not have a direct access to it. For example, you use component from some UI Kit library.
host.querySelector('input,textarea') so that might be sufficient. Use custom predicate if you need custom logic. Integration with third-party library for forms
There is not silver bullet how to integrate Maskito with any library for form-building. Explore all examples above – the provided knowledge about element predicate, ref merging and OnInput event will help you a lot to achieve it.
This example demonstrates how to use Maskito with popular library react-hook-form .
Best practices & Anti-Patterns
Pass named variables to avoid unnecessary hook runs with Maskito recreation:
Maskito