npm install react-maskedinput --save
The browser bundle exposes a global
MaskedInput variable and expects to find a global
React (>= 0.14.0) variable to work with.
mask and an
var React =var MaskedInput =var CreditCardDetails = React
Create some wrapper components if you have a masking configuration which will be reused:
var CustomInput = React
The masking pattern to be applied to the
See the inputmask-core docs for supported formatting characters.
(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.
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.
placeholder will be generated from the mask's pattern, but you can pass a
placeholder prop to provide your own.
number | string
By default, the rendered
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
onPaste- will each trigger a call to