A React component for <input> masking, built on top of inputmask-core.
npm install react-maskedinput --save
The browser bundle exposes a global MaskedInput variable and expects to find a global React variable to work with.
- react-maskedinput.js (development version)
- react-maskedinput.min.js (compressed production version)
Give MaskedInput a mask and an onChange callback:
importReactfrom'react'importMaskedInputfrom'react-maskedinput'classCreditCardDetailsextendsReact.Component{state={card: '',expiry: '',ccv: ''}_onChange=(e)=>{this.setState({[e.target.name]: e.target.value})}render(){return<divclassName="CreditCardDetails"><label>
Card Number:{' '}<MaskedInputmask="1111 1111 1111 1111"name="card"size="20"onChange={this._onChange}/></label><label>
Expiry Date:{' '}<MaskedInputmask="11/1111"name="expiry"placeholder="mm/yyyy"onChange={this._onChange}/></label><label>
CCV:{' '}<MaskedInputmask="111"name="ccv"onChange={this._onChange}/></label></div>}}Create some wrapper components if you have a masking configuration which will be reused:
functionCustomInput(props){return<MaskedInputmask="1111-WW-11"placeholder="1234-WW-12"size="11"{...props}formatCharacters={{'W': {validate(char){return/\w/.test(char)},transform(char){returnchar.toUpperCase()}}}}/>}The masking pattern to be applied to the <input>.
See the inputmask-core docs for supported formatting characters.
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.
Customised format character definitions for use in the pattern.
See the inputmask-core docs for details of the structure of this object.
Customised placeholder character used to fill in editable parts of the pattern.
See the inputmask-core docs for details.
A default value for the mask.
A default placeholder will be generated from the mask's pattern, but you can pass a placeholder prop to provide your own.
By default, the rendered <input>'s size will be the length of the pattern, but you can pass a size prop to override this.
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.lengthonKeyDown,onKeyPress&onPaste- will each trigger a call toonChangewhen necessary