@otw/mask

@otw/mask

Table Of Contents:

• Install
• Usage Examples
  • Birthdate input
  • Capitalized input for a first/last name
  • Credit Card input and CCV/CVC
  • Phone number input
• API
  • Validators
  • applyMask (function)
  • removeMask (function)
  • Mask (class)
• CONTRIBUTE
  • Local Installation
  • Run Tests
  • Build

Install

npm i --save @otw/mask

yarn add @otw/mask

Usage Examples

Birthdate input

1. The functional programming way

import { applyMask, removeMask } from '@otw/mask'
// or
const { applyMask, removeMask } = require('@otw/mask')

const mask = 'Dd/Mm/yYYY'
const validators = {
  D: /[0-3]/,
  d: /[0-9]/,
  M: /[01]/,
  m: /[0-9]/,
  y: /[12]/,
  Y: /[0-9]/,
}
const maskedValue = applyMask({ mask, validators, value: '10122018' })
// maskedValue → '10/12/2018'
const rawValue = removeMask({ mask, validators, value: '10/12/2018' })
// rawValue → '10122018'

1. The object-oriented programming way

import { Mask } from '@otw/mask'
const { Mask } = require('@otw/mask')

const mask = new Mask({
  mask: 'Dd/Mm/yYYY',
  validators: {
    D: /[0-3]/,
    d: /[0-9]/,
    M: /[01]/,
    m: /[0-9]/,
    y: /[12]/,
    Y: /[0-9]/,
  },
})
const maskedValue = mask.apply('10122018')
// maskedValue → '10/12/2018'
const rawValue = mask.remove('10/12/2018')
// rawValue → '10122018'

Capitalized input for a first/last name

import { letterIsBetween } from 'some-utils'

const mask = 'Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
const validators = {
  A: /[A-Z]/,
  a: /[a-z\-]/,
}

Credit Card input and CCV/CVC

const creditCardMask = '.... .... .... ....'
const ccvMask = '...'
const validators = {
  '.': /[0-9]/,
}

Phone number input

const mask = '... (...)-... ...'
const validators = {
  '.': /[0-9]/,
}

API

Validators

validators is an object in which each key should be present in the mask as the key stores a function used to check whether to accept the input or not at the given position (see examples upper ↑)

type OTWMaskValidator = RegExp;
type OTWMaskValidators = { [key: string]: OTWMaskValidator; }

applyMask (function)

function applyMask ({
  value: string;
  mask: string;
  validators?: OTWMaskValidators;
}): string

removeMask (function)

function removeMask ({
  value: string;
  mask: string;
  validators: OTWMaskValidator;
}): string

Mask (class)

class Mask {
  private mask: string;
  private validators: OTWMaskValidators;
  constructor ({ mask: string; validators: OTWMaskValidators }): void

  apply (value: string): string
  remove (value: string): string
}

CONTRIBUTE

This library is provided as is, without any intention to add functionalities or anything. I intend to keep this package extremely simple, with simple masking functionalities.

If there are any bugs though, you can still submit a pull request, which I'll check out if relevant.

Local Installation

git clone git@gitlab.com:thomasjuster/on-the-wire.git
cd ./on-the-wire
yarn
cd ./packages/mask

Run Tests

yarn test

Build

# development build
yarn make

# production build
yarn build