Text Mask Addons
These addons are ready-to-use pipes and masks that can be used with Text Mask.
npm i text-mask-addons --save
These can be passed as a
to Text Mask.
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
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
decimalSymbol(string): character that will act as a decimal point. Defaults to
decimalLimit(number): how many digits to allow after the decimal. Defaults to
integerLimit(number): limit the length of the integer number. Defaults to
requireDecimal(boolean): whether or not to always include a decimal point and placeholder for decimal digits after the integer. Defaults to
allowNegative(boolean): whether or not to allow negative numbers. Defaults to
allowLeadingZeroes(boolean): whether or not to allow leading zeroes. Defaults to
// First, you need to create the `numberMask` with your desired configurationsconst numberMask =// ...then pass `numberMask` to the Text Mask component as the mask
emailMask formats user input as an email address.
// ...then pass `emailMask` to the Text Mask component as the mask
Technical side note: even though
emailMask is passed as a
mask, it is actually made of both a
mask and a
together for convenience. The Text Mask component knows how to unwrap and separate the
mask functions to use them.
These functions here can be passed as a
to Text Mask.
createAutoCorrectedDatePipe returns a
autoCorrectedDatePipe, which can help the user in entering a date.
For example, if the user enters a value
1 in the 1st slot of month, it appends
0 to it. That is
04. It does a similar thing for the
It also blocks the user from entering invalid days or months such as
createAutoCorrectedDatePipe to work properly, the Text Mask component needs to be
const autoCorrectedDatePipe =// As you can see in the line above, you can pass a string argument to `createAutoCorrectedDatePipe`// to give it the order of day, month, and year in your `mask`.// ...now you can pass `autoCorrectedDatePipe` to the Text Mask component as the `pipe`