Addons for Text Mask https://github.com/text-mask/text-mask
npm install text-mask-addonsThese addons are ready-to-use pipes and masks that can be used with Text Mask.
``bash`
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:
1. prefix (string): what to display before the amount. Defaults to '$'.suffix
1. (string): what to display after the amount. Defaults to empty string.includeThousandsSeparator
1. (boolean): whether or not to separate thousands. Defaults to to true.thousandsSeparatorSymbol
1. (string): character with which to separate thousands. Default to ','.allowDecimal
1. (boolean): whether or not to allow the user to enter a fraction with the amount. Default to false.decimalSymbol
1. (string): character that will act as a decimal point. Defaults to '.'decimalLimit
1. (number): how many digits to allow after the decimal. Defaults to 2integerLimit
1. (number): limit the length of the integer number. Defaults to null for unlimitedrequireDecimal
1. (boolean): whether or not to always include a decimal point and placeholder for decimal digitsfalse
after the integer. Defaults to .allowNegative
1. (boolean): whether or not to allow negative numbers. Defaults to falseallowLeadingZeroes
1. (boolean): whether or not to allow leading zeroes. Defaults to false
#### Usage
`js
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.
#### Usage
`js
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 pipe
together for convenience. The Text Mask component knows how to unwrap and separate the 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.createAutoCorrectedDatePipe
The accepts a string specifying date format and an object with the following keys:
1. minYear (number): the minimum year allowed in the date field mask.maxYear
1. (number): the maximum year allowed in the date field mask.
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 bekeepCharPositions
configured withtrue
set to .
#### Usage
`js
import createAutoCorrectedDatePipe from 'text-mask-addons/dist/createAutoCorrectedDatePipe'
const autoCorrectedDatePipe = createAutoCorrectedDatePipe('mm/dd/yyyy HH:MM')
// As you can see in the line above, you can pass a string argument to createAutoCorrectedDatePipe mask
// to give it the order of day, month, year, hour and minute in your .
// ...now you can pass autoCorrectedDatePipe to the Text Mask component as the pipe``