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.
Text Mask Addons
These addons are ready-to-use pipes and masks that can be used with Text Mask.
Installation
npm i text-mask-addons --save-dev
Dynamic masks
These functions here can be passed as a
mask
to Text Mask.
createCurrencyMask
createCurrencyMask
returns a currencyMask
function that will format user input as currency.
createCurrencyMask
accepts an object with prefix
and suffix
keys. The default prefix
is $
and the default suffix
is nothing. So, currencyMask
by default will turn an input like
3000
to $3,000
.
Usage
import createCurrencyMask from 'text-mask-addons/dist/createCurrencyMask.js'
const currencyMask = createCurrencyMask({
prefix: '',
suffix: ' $'
})
Pipes
These functions here can be passed as a
pipe
to Text Mask.
assistedMmddyyyyPipe
The assistedMmddyyyyPipe
helps the user in entering a date in the MM/DD/YYYY
format.
For example, if the user enters a value
larger than 1
in the 1st slot of month, it appends 0
to it. That is 4
=> 04
. It does a similar thing for the
day slots.
When the user enters 0
in the 1st slot of the year, it transforms that to 200
.
It also blocks the user from entering invalid days or months such as 33/44
.
For assistedMmddyyyyPipe
to work properly, the Text Mask component needs to be
configured with
keepCharPositions
set to true
.
Usage
import assistedMmddyyyyPipe from 'text-mask-addons/dist/assistedMmddyyyyPipe.js'