@krutoo/input-mask
v0.1.0
Published
Set of useful utils for JavaScript/TypeScript projects
Downloads
933
Readme
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 add @krutoo/input-mask
Usage:
import { createInputMask } from '@krutoo/input-mask/dom';
const input = document.querySelector('input#phone');
const inputMask = createInputMask(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.getState();
// 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 statedefineChanges
: takes current state and next state and returns change action
To Do
- ✅ Create helper to use with
vanilla js
(no frameworks) - ✅ Divide
react solution
onreact
andvanilla 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...