text-mask-addons

What is text-mask-addons?

The text-mask-addons npm package provides a set of useful add-ons for the text-mask library, which is used to create input masks for form fields. These add-ons include pre-defined masks for common input types such as phone numbers, email addresses, and dates.

What are text-mask-addons's main functionalities?

createNumberMask

The createNumberMask function allows you to create a mask for numeric inputs. This is useful for formatting currency, percentages, or any other numerical input.

const createNumberMask = require('text-mask-addons/dist/createNumberMask');
const numberMask = createNumberMask({
  prefix: '$',
  suffix: '',
  includeThousandsSeparator: true,
  thousandsSeparatorSymbol: ',',
  allowDecimal: true,
  decimalSymbol: '.',
  decimalLimit: 2,
  integerLimit: 7,
  allowNegative: false,
  allowLeadingZeroes: false
});

emailMask

The emailMask is a pre-defined mask for email addresses. It ensures that the input follows the general structure of an email address.

const emailMask = require('text-mask-addons/dist/emailMask');
const maskedInput = emailMask;

createAutoCorrectedDatePipe

The createAutoCorrectedDatePipe function creates a pipe that auto-corrects date input as the user types. This is useful for ensuring that dates are entered in a valid format.

const createAutoCorrectedDatePipe = require('text-mask-addons/dist/createAutoCorrectedDatePipe');
const autoCorrectedDatePipe = createAutoCorrectedDatePipe('mm/dd/yyyy');

Other packages similar to text-mask-addons

react-text-mask

react-text-mask is a library for creating input masks in React applications. It provides similar functionality to text-mask-addons but is specifically designed for use with React components.

cleave.js

Cleave.js is a JavaScript library for formatting input fields. It offers a wide range of formatting options, including credit card numbers, phone numbers, dates, and more. Cleave.js provides more flexibility and customization options compared to text-mask-addons.

inputmask

inputmask is a library for creating input masks in JavaScript. It supports a wide range of input types and provides extensive customization options. Inputmask is more feature-rich and versatile compared to text-mask-addons.

README

Text Mask Addons

Text Mask addons are accessories for Text Mask. Currently, the only available addon is createMmddyyyyValidator.js

Installation

npm i text-mask-addons --save-dev

Validators

createMmddyyyyValidator

createMmddyyyyValidator returns a function that ensures the user is typing a valid mm/dd/yyyy date.

Usage

import createMmddyyyyValidator from 'text-mask-addons/dist/createMmddyyyyValidator'

var mmddyyyyValidator = createMmddyyyyValidator({
  minimumDate: '01/01/1900',
  maximumDate: '12/31/2016'
})

// ...then pass `mmddyyyyValidator` to Text Mask component