https://github.com/krutoo/input-mask
One more input masks library
https://github.com/krutoo/input-mask
framework-agnostic input javascript mask
Last synced: about 1 year ago
JSON representation
One more input masks library
- Host: GitHub
- URL: https://github.com/krutoo/input-mask
- Owner: krutoo
- License: mit
- Created: 2020-12-18T12:02:45.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-07-24T10:19:24.000Z (about 2 years ago)
- Last Synced: 2025-06-29T05:02:30.313Z (about 1 year ago)
- Topics: framework-agnostic, input, javascript, mask
- Language: TypeScript
- Homepage: https://krutoo.github.io/input-mask
- Size: 908 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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:
```bash
npm add @krutoo/input-mask
```
Usage:
```ts
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 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...