Maskito

Maskito is designed to be robust and handle a wide variety of user interactions with text fields, including:

• Keyboard interactions: Basic typing and deleting.
• Pointer/Mouse interactions: Pasting and dropping text.
• Browser/Mobile features: Browser autofill and predictive text from mobile native keyboards.
• Environment support: Works with Server Side Rendering (SSR) and Shadow DOM.
• Element compatibility: Can be used with HTMLInputElement, HTMLTextAreaElement, or [contenteditable] elements.

The core package is zero-dependency and framework-agnostic, making it suitable for vanilla JavaScript projects.

When implementing a Maskito preprocessor, the first argument provided to the processor function is an object representing the state of the input element before any changes are applied, combined with the new data being processed.

This object contains:

• elementState: The current state of the input element, including its value and the current selection (a tuple of [from, to]).
• data: The new characters being inserted or modified. This string may be empty if the user action is a deletion or if the input is being validated.

type firstArgDemo = {
  // current input's element state BEFORE any changes are applied
  elementState: {
    value: string;
    selection: [from: number, to: number];
  };
  // new typed characters which is going to be inserted to the element
  data: string; // can be empty string if it is deletion or validation
};

To use the ready-to-use phone mask provided by @maskito/phone, you must install both @maskito/phone and the core package @maskito/core via npm.

npm i @maskito/{core,phone}

To use Maskito in a React project, you need to install both the React-specific adapter and the core library. The React adapter provides a convenient hook-based API for applying masks to input elements.

npm i @maskito/{core,react}

To use Maskito in an Angular project, you must install both the Angular-specific directive package and the core Maskito engine. Use the following command to install them via npm:

npm i @maskito/{core,angular}

To use Maskito in a React Native project, you must install both the @maskito/react-native package and the @maskito/core package. This provides the necessary hooks to apply input masks to React Native components.

npm i @maskito/{core,react-native}

To use Maskito in a Vue project, you need to install both the core library and the Vue-specific adapter. The @maskito/vue package provides a convenient way to use Maskito as a directive.

npm i @maskito/{core,vue}

Install the core Maskito package to use it in vanilla JavaScript projects or as the foundation for framework-specific integrations. This package is zero-dependency and framework-agnostic.

npm i @maskito/core

To use the ready-to-use masks provided by @maskito/kit, you must also install @maskito/core. You can install both using npm:

npm i @maskito/{core,kit}