@maskito/react is a light-weighted library to use Maskito in an React-way.
and use Maskito
See the result of above code example in action:
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.
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.
Pass named variables to avoid unnecessary hook runs with Maskito recreation: