React

Source code

@maskito/react is a light-weighted library to use Maskito in an React-way.

Prerequisites

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:

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.

By default Maskito will try to find input/textarea by querying its host: host.querySelector('input,textarea') so that might be sufficient. Use custom predicate if you need custom logic.

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.

Best practices & Anti-Patterns

Pass named variables to avoid unnecessary hook runs with Maskito recreation: