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

Masks

These 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:

1. prefix (string): what to display before the amount. Defaults to '.
2. suffix (string): what to display after the amount. Defaults to empty string.
3. includeThousandsSeparator (boolean): whether or not to separate thousands. Defaults to to true.
4. thousandsSeparatorSymbol (string): character with which to separate thousands. Default to ','.
5. allowDecimal (boolean): whether or not to allow the user to enter a fraction with the amount. Default to false.
6. decimalSymbol (string): character that will act as a decimal point. Defaults to '.'
7. decimalLimit (number): how many digits to allow after the decimal. Defaults to 2
8. integerLimit (number): limit the length of the integer number. Defaults to null for unlimited
9. requireDecimal (boolean): whether or not to always include a decimal point and placeholder for decimal digits after the integer. Defaults to false.
10. allowNegative (boolean): whether or not to allow negative numbers. Defaults to false
11. allowLeadingZeroes (boolean): whether or not to allow leading zeroes. Defaults to false

import createNumberMask from 'text-mask-addons/dist/createNumberMask'

// First, you need to create the `numberMask` with your desired configurations
const numberMask = createNumberMask({
  prefix: '',
  suffix: ' 
emailMask
emailMask formats user input as an email address.
Usage
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. 
Pipes
These functions here can be passed as a
pipe
to Text Mask.
createAutoCorrectedDatePipe
The createAutoCorrectedDatePipe returns a autoCorrectedDatePipe, which can help the user in entering a date.
The createAutoCorrectedDatePipe accepts a string specifying date format and an object with the following keys:

minYear (number): the minimum year allowed in the date field mask.
maxYear (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 be
configured with
keepCharPositions
set to true.
Usage
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` 
// to give it the order of day, month, year, hour and minute in your `mask`.

// ...now you can pass `autoCorrectedDatePipe` to the Text Mask component as the `pipe`
 // This will put the dollar sign at the end, with a space.
})

// ...then pass `numberMask` to the Text Mask component as the mask

Usage

import createNumberMask from 'text-mask-addons/dist/createNumberMask'

// First, you need to create the `numberMask` with your desired configurations
const numberMask = createNumberMask({
  prefix: '',
  suffix: ' 
__INLINE_CODE_26__
__INLINE_CODE_27__ formats user input as an email address.
Usage
import emailMask from 'text-mask-addons/dist/emailMask'

// ...then pass `emailMask` to the Text Mask component as the mask
Technical side note: even though __INLINE_CODE_28__ is passed as a __INLINE_CODE_29__, it is actually made of both a __INLINE_CODE_30__ and a __INLINE_CODE_31__ bundled 
together for convenience. The Text Mask component knows how to unwrap and separate the __INLINE_CODE_32__ and __INLINE_CODE_33__ functions to use them. 
Pipes
These functions here can be passed as a
__INLINE_CODE_34__
to Text Mask.
__INLINE_CODE_35__
The __INLINE_CODE_36__ returns a __INLINE_CODE_37__, which can help the user in entering a date.
The __INLINE_CODE_38__ accepts a string specifying date format and an object with the following keys:

__INLINE_CODE_39__ (number): the minimum year allowed in the date field __INLINE_CODE_40__.
__INLINE_CODE_41__ (number): the maximum year allowed in the date field __INLINE_CODE_42__.

For example, if the user enters a value
larger than __INLINE_CODE_43__ in the 1st slot of month, it appends __INLINE_CODE_44__ to it. That is __INLINE_CODE_45__ => __INLINE_CODE_46__. It does a similar thing for the
day slots.
It also blocks the user from entering invalid days or months such as __INLINE_CODE_47__.
For __INLINE_CODE_48__ to work properly, the Text Mask component needs to be
configured with
__INLINE_CODE_49__
set to __INLINE_CODE_50__.
Usage
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` 
// to give it the order of day, month, year, hour and minute in your `mask`.

// ...now you can pass `autoCorrectedDatePipe` to the Text Mask component as the `pipe`
 // This will put the dollar sign at the end, with a space.
})

// ...then pass `numberMask` to the Text Mask component as the mask

__INLINE_CODE_26__

__INLINE_CODE_27__ formats user input as an email address.

Usage

Technical side note: even though __INLINE_CODE_28__ is passed as a __INLINE_CODE_29__, it is actually made of both a __INLINE_CODE_30__ and a __INLINE_CODE_31__ bundled together for convenience. The Text Mask component knows how to unwrap and separate the __INLINE_CODE_32__ and __INLINE_CODE_33__ functions to use them.

Pipes

These functions here can be passed as a __INLINE_CODE_34__ to Text Mask.

__INLINE_CODE_35__

The __INLINE_CODE_36__ returns a __INLINE_CODE_37__, which can help the user in entering a date. The __INLINE_CODE_38__ accepts a string specifying date format and an object with the following keys:

1. __INLINE_CODE_39__ (number): the minimum year allowed in the date field __INLINE_CODE_40__.
2. __INLINE_CODE_41__ (number): the maximum year allowed in the date field __INLINE_CODE_42__.

For example, if the user enters a value larger than __INLINE_CODE_43__ in the 1st slot of month, it appends __INLINE_CODE_44__ to it. That is __INLINE_CODE_45__ => __INLINE_CODE_46__. It does a similar thing for the day slots.

It also blocks the user from entering invalid days or months such as __INLINE_CODE_47__.

For __INLINE_CODE_48__ to work properly, the Text Mask component needs to be configured with __INLINE_CODE_49__ set to __INLINE_CODE_50__.

Usage