# react-maskedinput

> Masked React component

Latest version **4.0.1** (published 2018-01-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-maskedinput
pnpm add react-maskedinput
yarn add react-maskedinput
bun add react-maskedinput
```

## Health

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

Positive: has types package; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.1 |
| Published | 2018-01-26 |
| First published | 2015-03-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-maskedinput) |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 727 |
| Author | Jonny Buchanan |
| Maintainers | monastic.panic, iamdustan, insin |
| Keywords | react, masked, input, react-component |

## Links

- npm: https://www.npmjs.com/package/react-maskedinput
- Repository: https://github.com/insin/react-maskedinput
- Issues: https://github.com/insin/react-maskedinput/issues
- npm.io page: https://npm.io/package/react-maskedinput

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.7
- [inputmask-core](https://npm.io/package/inputmask-core.md) ^2.1.1

## 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

- 4.0.1 (latest) — 2018-01-26
- 4.0.0 — 2017-07-04
- 3.3.4 — 2016-12-15
- 3.3.3 — 2016-12-01
- 3.3.2 — 2016-12-01
- 3.3.1 — 2016-11-22
- 3.3.0 — 2016-10-10
- 3.2.4 — 2016-08-09
- 3.2.3 — 2016-07-27
- 3.2.2 — 2016-07-22
- 3.2.1 — 2016-07-20
- 3.2.0 — 2016-05-24
- 3.1.3 — 2016-05-02
- 3.1.2 — 2016-04-11
- 3.1.1 — 2016-03-09
- … 5 more at https://npm.io/package/react-maskedinput/versions

## README

# `MaskedInput`

A [React](http://facebook.github.io/react/) component for `<input>` masking, built on top of [inputmask-core](https://github.com/insin/inputmask-core).

![This project has never been used by its author, other than while making it.](https://img.shields.io/badge/author--usage-never-red.png "This project has never been used by its author, other than while making it")

## [Live Demo](http://insin.github.io/react-maskedinput/)

## Install

### npm

```
npm install react-maskedinput --save
```

### Browser bundle

The browser bundle exposes a global `MaskedInput` variable and expects to find a global `React` variable to work with.

* [react-maskedinput.js](https://unpkg.com/react-maskedinput/umd/react-maskedinput.js) (development version)
* [react-maskedinput.min.js](https://unpkg.com/react-maskedinput/umd/react-maskedinput.min.js) (compressed production version)

## Usage

Give `MaskedInput` a [`mask`](#mask-string) and an `onChange` callback:

```javascript
import React from 'react'
import MaskedInput from 'react-maskedinput'

class CreditCardDetails extends React.Component {
  state = {
    card: '',
    expiry: '',
    ccv: ''
  }

  _onChange = (e) => {
    this.setState({[e.target.name]: e.target.value})
  }

  render() {
    return <div className="CreditCardDetails">
      <label>
        Card Number:{' '}
        <MaskedInput mask="1111 1111 1111 1111" name="card" size="20" onChange={this._onChange}/>
      </label>
      <label>
        Expiry Date:{' '}
        <MaskedInput mask="11/1111" name="expiry" placeholder="mm/yyyy" onChange={this._onChange}/>
      </label>
      <label>
        CCV:{' '}
        <MaskedInput mask="111" name="ccv" onChange={this._onChange}/>
      </label>
    </div>
  }
}
```

Create some wrapper components if you have a masking configuration which will be reused:

```javascript
function CustomInput(props) {
  return <MaskedInput
    mask="1111-WW-11"
    placeholder="1234-WW-12"
    size="11"
    {...props}
    formatCharacters={{
      'W': {
        validate(char) { return /\w/.test(char ) },
        transform(char) { return char.toUpperCase() }
      }
    }}
  />
}
```

## Props

### `mask` : `string`

The masking pattern to be applied to the `<input>`.

See the [inputmask-core docs](https://github.com/insin/inputmask-core#pattern) for supported formatting characters.

### `onChange` : `(event: SyntheticEvent) => any`

A callback which will be called any time the mask's value changes.

This will be passed a `SyntheticEvent` with the input accessible via `event.target` as usual.

**Note:** this component currently calls `onChange` directly, it does not generate an `onChange` event which will bubble up like a regular `<input>` component, so you *must* pass an `onChange` if you want to get a value back out.

### `formatCharacters`: `Object`

Customised format character definitions for use in the pattern.

See the [inputmask-core docs](https://github.com/insin/inputmask-core#formatcharacters) for details of the structure of this object.

### `placeholderChar`: `string`

Customised placeholder character used to fill in editable parts of the pattern.

See the [inputmask-core docs](https://github.com/insin/inputmask-core#placeholderchar--string) for details.

### `value` : `string`

A default value for the mask.

### `placeholder` : `string`

A default `placeholder` will be generated from the mask's pattern, but you can pass a `placeholder` prop to provide your own.

### `size` : `number | string`

By default, the rendered `<input>`'s `size` will be the length of the pattern, but you can pass a `size` prop to override this.

### Other props

Any other props passed in will be passed as props to the rendered `<input>`, except for the following, which are managed by the component:

* `maxLength` - will always be equal to the pattern's `.length`
* `onKeyDown`, `onKeyPress` & `onPaste` - will each trigger a call to `onChange` when necessary

## MIT Licensed

---
_Source: https://npm.io/package/react-maskedinput · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._