@mdgbayly/react-maskedinput v3.2.2
MaskedInput
A React component for <input>
masking, built on top of inputmask-core.
Bug fixes / Changes
This scoped fork of react-masked input includes bug fixes for the following PRs:
https://github.com/insin/react-maskedinput/pull/38
It also depends on a forked version of inputmask-core. The fork allows for a blankPlaceholderChar in the mask. This is required by our usage of this library and works with our mask which has the form '111%' for entering percentages. However, I do not know if this will break other masks/scenarios. This version of react-maskedinput also contains a fix to allow a blank placeholderChar to be passed to to InputMask. The master version ignores blank placeholders.
Live Demo
Install
npm
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
Browser bundle
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:
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 <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:
var CustomInput = React.createClass({
render() {
return <MaskedInput
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
mask
: string
The masking pattern to be applied to the <input>
.
See the inputmask-core docs 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 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 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 toonChange
when necessary