imbrn / maskin

🎭 Non-intrusive, natural and user friendly input masking system.

Maskin

Core - React

⚠️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.

Sub-projects

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

• React

  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.

• Vue

  (Coming soon...)

• Angular

  (Coming soon...)

License

This project and all its sub-projects are licensed by MIT License.