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
mask
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 totrue
.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 tofalse
.decimalSymbol
(string): character that will act as a decimal point. Defaults to'.'
decimalLimit
(number): how many digits to allow after the decimal. Defaults to2
integerLimit
(number): limit the length of the integer number. Defaults tonull
for unlimitedrequireDecimal
(boolean): whether or not to always include a decimal point and placeholder for decimal digits after the integer. Defaults tofalse
.allowNegative
(boolean): whether or not to allow negative numbers. Defaults tofalse
allowLeadingZeroes
(boolean): whether or not to allow leading zeroes. Defaults tofalse
import createNumberMask from 'text-mask-addons/dist/createNumberMask'
// First, you need to create the `numberMask` with your desired configurations
const numberMask = createNumberMask({
prefix: '',
suffix: ' $' // This will put the dollar sign at the end, with a space.
})
// ...then pass `numberMask` to the Text Mask component as the mask
emailMask
formats user input as an email address.
import emailMask from 'text-mask-addons/dist/emailMask'
// ...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 pipe
bundled
together for convenience. The Text Mask component knows how to unwrap and separate the pipe
and mask
functions to use them.
These functions here can be passed as a
pipe
to Text Mask.
The createAutoCorrectedDatePipe
returns a autoCorrectedDatePipe
, which can help the user in entering a date.
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.
It also blocks the user from entering invalid days or months such as 33/44
.
For createAutoCorrectedDatePipe
to work properly, the Text Mask component needs to be
configured with
keepCharPositions
set to true
.
import createAutoCorrectedDatePipe from 'text-mask-addons/dist/createAutoCorrectedDatePipe'
const autoCorrectedDatePipe = createAutoCorrectedDatePipe('mm/dd/yyyy')
// 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`