Skip to content

krutoo/input-mask

Repository files navigation

One more input mask library

JavaScript lib for making static masked inputs

Features

  • only static masks (fixed number of characters)
  • working with pure DOM inputs
  • able to make solutions for React/Vue/Angular based on this library

Usage

Installing:

npm install --save @krutoo/input-mask

Usage:

import { InputMask } from '@krutoo/input-mask/dist/dom';

const input = document.querySelector('input#phone');

const inputMask = InputMask(input, {
  mask: '___-____-____',
  placeholder: '_',
  pattern: /\d/,

  onInput: ({ value, cleanValue, completed }) => {
    // "value" is string with masked value
    // "cleanValue" is string only writable characters
    // "completed" is boolean which shows that the mask is completely filled
  },
});

// returns actual state of input
const { value, cleanValue, completed } = inputMask.getData();

// sets value manually
inputMask.setValue('00000000000');

// disables masking on element
inputMask.disable();

Advanced usage

This package also contains parts for build your own solution to provide input masking.

There is a several functions:

  • createReducer: returns reducer which takes input state and change action and returns the new state
  • defineChanges: takes current state and next state and returns change action

To Do

  • ✅ Create helper to use with vanilla js (no frameworks)
  • ✅ Divide react solution on react and vanilla js solutions
  • Add able to use middleware methods to prepare value before mask applying
  • Add examples of usage in React, React Native, Vue, Angular, Svelte...