mask-to

A simple library to mask values based on RegExp

Installation

Using Yarn

yarn add mask-to

Using NPM

npm i mask-to

Usage

Format string

import { Mask } from "mask-to"

const phone = [
  "+",
  /\d/,
  /\d/,
  " ",
  /\d/,
  /\d/,
  /\d/,
  "-",
  /\d/,
  /\d/,
  /\d/,
  /\d/,
];

Mask.to(phone, "554441111");

// [LOG]: +55 444-1111

Format string

import React, { ChangeEvent, useCallback } from "react";
import { Mask } from "mask-to";

const phone = [
  "+",
  /\d/,
  /\d/,
  " ",
  /\d/,
  /\d/,
  /\d/,
  "-",
  /\d/,
  /\d/,
  /\d/,
  /\d/,
];

export default Adapter ({onChange, ...props}) => {
  const onChangeInterceptor = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
      event.target.value = Mask.to(phone, event.target.value);

      onChange?.(event);
    },
    []
  );

  return <input onChange={onChangeInterceptor} {...props} />;
};

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.