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
Mask functions
These functions here can be passed as a
mask
to Text Mask.
createNumberMask
createNumberMask
returns a numberMask
function that will format user input as currency.
createNumberMask
accepts an object with the following keys:
prefix
(string): what to display before the amount. Defaults to '$'
.suffix
(string): what to display after the amount. Defaults to empty string.includeThousandsSeparator
(boolean): whether or not to separate thousands. Defaults to to true
.thousandsSeparatorSymbol
(string): character with which to separate thousands. Default to ','
.allowDecimal
(boolean): whether or not to allow the user to enter a fraction with the amount. Default to false
.decimalSymbol
(string): character that will act as a decimal point. Defaults to '.'
decimalLimit
(number): how many digits to allow after the decimal. Defaults to 2
requireDecimal
(boolean): whether or not to always include a decimal point and placeholder for decimal digits
after the integer. Defaults to false
.
Usage
import createNumberMask from 'text-mask-addons/dist/createNumberMask.js'
const numberMask = createNumberMask({
prefix: '',
suffix: ' $'
})
Pipes
These functions here can be passed as a
pipe
to Text Mask.
autoCorrectedMmddyyyyPipe
The autoCorrectedMmddyyyyPipe
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.
And for the year, 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 autoCorrectedMmddyyyyPipe
to work properly, the Text Mask component needs to be
configured with
keepCharPositions
set to true
.
Usage
import autoCorrectedMmddyyyyPipe from 'text-mask-addons/dist/autoCorrectedMmddyyyyPipe.js'