MaskedInput

A React component for masking, built on top of inputmask-core.

!This project has never been used by its author, other than while making it.

Live Demo

Install

$3

MaskedInput can be used on the server, or bundled for the client using an npm-compatible packaging system such as Browserify or webpack.

``
npm install react-maskedinput --save
`

$3

The browser bundle exposes a global MaskedInput variable and expects to find a global React (>= 0.14.0) variable to work with.

* react-maskedinput.js (development version)
* react-maskedinput.min.js (compressed production version)

Usage

Give MaskedInput a mask and an onChange callback:

`javascript
var React = require('react')
var MaskedInput = require('react-maskedinput')

var CreditCardDetails = React.createClass({
state: {
card: '',
expiry: '',
ccv: ''
},

_onChange(e) {
var stateChange = {}
stateChange[e.target.name] = e.target.value
this.setState(stateChange)
},

render() {
return


}
})
`

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

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

Props

$3

The masking pattern to be applied to the .

See the inputmask-core docs for supported formatting characters.

$3

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 component, so you must pass an onChange if you want to get a value back out.

$3

Customised format character definitions for use in the pattern.

See the inputmask-core docs for details of the structure of this object.

$3

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

See the inputmask-core docs for details.

$3

A default value for the mask.

$3

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

$3

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

$3

Any other props passed in will be passed as props to the rendered , 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