You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					101 lines
				
				3.9 KiB
			
		
		
			
		
	
	
					101 lines
				
				3.9 KiB
			| 
								 
											3 years ago
										 
									 | 
							
								# Text Mask Addons
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								These addons are ready-to-use pipes and masks that can be used with Text Mask.
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								## Installation
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								```bash
							 | 
						||
| 
								 | 
							
								npm i text-mask-addons --save
							 | 
						||
| 
								 | 
							
								```
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								## Masks
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								These can be passed as a
							 | 
						||
| 
								 | 
							
								[`mask`](https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#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 `'$'`.
							 | 
						||
| 
								 | 
							
								1. `suffix` (string): what to display after the amount. Defaults to empty string.
							 | 
						||
| 
								 | 
							
								1. `includeThousandsSeparator` (boolean): whether or not to separate thousands. Defaults to to `true`.
							 | 
						||
| 
								 | 
							
								1. `thousandsSeparatorSymbol` (string): character with which to separate thousands. Default to `','`.
							 | 
						||
| 
								 | 
							
								1. `allowDecimal` (boolean): whether or not to allow the user to enter a fraction with the amount. Default to `false`.
							 | 
						||
| 
								 | 
							
								1. `decimalSymbol` (string): character that will act as a decimal point. Defaults to `'.'`
							 | 
						||
| 
								 | 
							
								1. `decimalLimit` (number): how many digits to allow after the decimal. Defaults to `2`
							 | 
						||
| 
								 | 
							
								1. `integerLimit` (number): limit the length of the integer number. Defaults to `null` for unlimited
							 | 
						||
| 
								 | 
							
								1. `requireDecimal` (boolean): whether or not to always include a decimal point and placeholder for decimal digits
							 | 
						||
| 
								 | 
							
								after the integer. Defaults to `false`.
							 | 
						||
| 
								 | 
							
								1. `allowNegative` (boolean): whether or not to allow negative numbers. Defaults to `false`
							 | 
						||
| 
								 | 
							
								1. `allowLeadingZeroes` (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`
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								`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 
							 | 
						||
| 
								 | 
							
								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`](https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#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:
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								1. `minYear` (number): the minimum year allowed in the date field `mask`.
							 | 
						||
| 
								 | 
							
								1. `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`](https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#keepcharpositions)
							 | 
						||
| 
								 | 
							
								set to `true`.
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								#### 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` 
							 | 
						||
| 
								 | 
							
								// 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`
							 | 
						||
| 
								 | 
							
								```
							 |