open-index/open-npm huggingface dataset:
npm package: @msafi/angular2-text-mask
Description: Angular 2 directive for input text masking
Author: M.K. Safi
Latest version: 0.7.0
Deprecated: No longer maintained. Install 'angular2-text-mask' without '@msafi/'

# Angular 2 Input Mask

## Getting started

First, install it.

```bash
npm i @msafi/angular2-text-mask --save
```

Then, require it and use it:

```typescript
import 'es6-shim';
import 'es6-promise';
import 'zone.js/dist/zone';
import 'reflect-metadata';

import {bootstrap} from 'angular2/platform/browser'
import {Component} from 'angular2/core';
import MaskedInput from '@msafi/angular2-text-mask'

@Component({
  selector: 'app',
  templateUrl: `
    <input [textMask]="{mask: '(111) 111 1111'}" [(ngModel)]="myModel" type="text"/>
  `,
  directives: [MaskedInput]
})
export class AppComponent {
  private myModel = ''
}

bootstrap(AppComponent);
```

## Example

### TypeScript

You can see a working example in
[this folder](https://github.com/msafi/text-mask/tree/master/angular2/example).

### Plain JavaScript

For a plain JavaScript example, you can check out
[this Plunk](http://plnkr.co/edit/QImy7qOVZTmTM8ftiB84?p=preview).

## Documentation

As you can see in the example above, you are passing an object to the `textMask` directive.

For more information about the values that the `textMask` object accepts, see
the [documentation here](https://github.com/msafi/text-mask/blob/master/componentDocumentation.md#readme).

## License

Public domain - [CC0 1.0 Universal](https://creativecommons.org/publicdomain/zero/1.0/)
npm package: @msafi/react-text-mask
Description: React input component that accepts mask pattern
Author: M.K. Safi
Latest version: 0.8.2
Deprecated: No longer maintained. Install 'react-text-mask' without '@msafi/'

# React Input Mask

## Getting started

First, install it.

```bash
npm i @msafi/react-text-mask --save
```

Then, require it and use it.

```js
var React = require('react')
var MaskedInput = require('@msafi/react-text-mask')

var MyComponent = React.createClass({
  render() {
    return (
      <div>
        <MaskedInput mask="(111) 111-1111" />
      </div>
    )
  }
})
```

`<MaskedInput/>` is fully compatible with `<input/>` element. So, you can
pass to it CSS classes, a placeholder attribute, or whatever.

For example, the following works:

```html
<MaskedTextInput
  mask="11111"
  className="form-control"
  placeholder="Enter zip code"
  guide={false}
  id="my-input-id"
/>
```

## Example

For a working example, check out the source code of
[this HTML file](https://msafi.github.io/text-mask/react/example.html).

## Documentation

For more information about the `props` that you can pass to the component, see
the [documentation here](https://github.com/msafi/text-mask/blob/master/componentDocumentation.md#readme).

## License

Public domain - [CC0 1.0 Universal](https://creativecommons.org/publicdomain/zero/1.0/)
npm package: @msafi/vanilla-text-mask
Description: JavaScript function that makes input HTML element accept mask pattern
Author: M.K. Safi
Latest version: 0.8.0
Deprecated: No longer maintained. Install 'vanilla-text-mask' without '@msafi/'

# JavaScript Input Mask

## Getting started

First, install it.

```bash
npm i @msafi/vanilla-text-mask --save
```

Then, use it as follows:

```html
<script
  type="text/javascript"
  src="./node_modules/@msafi/vanilla-text-mask/dist/textMask.js"></script>
<script type="text/javascript">
  var phoneMask = '(111) 111-1111'

  // Assuming you have an input element in your HTML with the class .myInput
  var myInput = document.querySelector('.myInput')

  // You can set the placeholder of myInput
  myInput.placeholder = textMask.convertMaskToPlaceholder(phoneMask)

  textMask.maskInput({
    element: myInput,
    mask: phoneMask
  })
</script>
```

## Example

For a working example, check out the source code of
[this HTML file](https://msafi.github.io/text-mask/vanilla/example.html).

## Documentation

As you can see in the example above, you are passing an object to `textMask.maskInput(...)`.

The object takes `element`, which is the `<input/>` element that you are masking. It also
accepts other values which are
[documented here](https://github.com/msafi/text-mask/blob/master/componentDocumentation.md#readme).

## License

Public domain - [CC0 1.0 Universal](https://creativecommons.org/publicdomain/zero/1.0/)