# @snsl/text-mask-addons

> Addons for Text Mask https://github.com/SeniorSolution/text-mask

Latest version **3.8.12** (published 2019-03-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @snsl/text-mask-addons
pnpm add @snsl/text-mask-addons
yarn add @snsl/text-mask-addons
bun add @snsl/text-mask-addons
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.8.12 |
| Published | 2019-03-14 |
| First published | 2018-04-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 292.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | M.K. Safi |
| Maintainers | helio.beirao, kazuoyatsu, rainickmr, tico.araujo |
| Keywords | text mask, input mask, string mask, input formatting, text formatting, string formatting |

## Links

- npm: https://www.npmjs.com/package/@snsl/text-mask-addons
- Repository: https://github.com/SeniorSolution/text-mask
- Homepage: https://github.com/SeniorSolution/text-mask/tree/master/addons/#readme
- Issues: https://github.com/SeniorSolution/text-mask/issues
- npm.io page: https://npm.io/package/@snsl/text-mask-addons

## Dependencies (1)

- [@snsl/text-mask-core](https://npm.io/package/@snsl/text-mask-core.md) 5.1.8

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.8.12 (latest) — 2019-03-14
- 3.8.11 — 2018-12-17
- 3.8.10 — 2018-12-17
- 3.8.9 — 2018-12-03
- 3.8.8 — 2018-11-30
- 3.8.7 — 2018-11-30
- 3.8.6 — 2018-11-30
- 3.8.5 — 2018-11-30
- 3.8.4 — 2018-11-28
- 3.8.3 — 2018-11-28
- 3.8.2 — 2018-11-28
- 3.8.1 — 2018-11-28
- 3.8.0 — 2018-11-27
- 3.7.9 — 2018-06-12
- 3.7.8 — 2018-06-06
- … 6 more at https://npm.io/package/@snsl/text-mask-addons/versions

## README

# 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`
1. `fixedDecimalScale` (boolean): whether or not to fixed decimal scale. 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`
```

---
_Source: https://npm.io/package/@snsl/text-mask-addons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._