⚠️ This project is just in an alpha stage and all its APIs are subject to change. We're also open to suggestions and PRs from all of you.
With Maskin you can provide your users a very natural way to input masked data. Let your users think they are typing without software intervention. But it will keep everything right.
Maskin is also really easy to configure and use. It provides you a lot of flexibility in the way you declare your masking patterns.
Choose one of the sub-projects that fits your needs better:
-
Vanilla JS input/ouput masking
This project is a programming level utility for raw string input masking. It provides you a way to perform masking string to string.
import Maskin from "@maskin/core"; const myMask = Maskin("###.xxx"); myMask("123abc"); // 123.abc myMask("123.abc"); // 123.abc
-
This project provides you a lot of useful things as components, higher-order components, and functions for you to use in your react projects.
Example of usage of the
Mask
component:import { Mask } from "@maskin/react"; <Mask pattern="###-##.xx"> {({ value, handleChage }) => ( <input type="text" onChange={handleChange} value={value} /> )} </Mask>
Take a look at the project itself for more useful information about how to use it in your react projects.
-
(Coming soon...)
-
(Coming soon...)
This project and all its sub-projects are licensed by MIT License.