react-maskedinput-ultimate

Based on: react-maskedinput.

And: inputmask-core

A React component for masking, built on top of .

!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-ultimate --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-ultimate.js (development version)
* react-maskedinput-ultimate.min.js (compressed production version)

Usage

Give MaskedInput a mask and an onChange callback:

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

class CreditCardDetails extends React.Component {
constructor(props) {
super(props)
this.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
let formatters = {
'W': {
validate(char) { return /\w/.test(char ) },
transform(char) { return char.toUpperCase() }
}
}
const CustomInput = (props) => (
mask="1111-WW-11"
placeholder="1234-WW-12"
size="11"
{....props}
formatCharacters={formatters}/>
);
`

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

An optional property that, if true, progressively shows the mask as input is entered. Defaults to false

Example:
Given an input with a mask of 111-1111 x 111, a value of 47, and isRevealingMask set to true, then the input's value is formatted as 47
Given the same input but with a value of 476, then the input's value is formatted as 476-
Given the same input but with a value of 47 3191, then the input's value is formatted as 47_-3191 x

See the inputmask-core docs for details.

$3

With this option your placeholder would be fixed during typing on input. With this option isRevealingMask set to true and placeholderChar set to (space) automatically for best expirience using fixed placeholder.

$3

Only with placeholderFixed. This option set class to the wrapper of the input.

$3

Only with placeholderFixed. This option set class to the placeholder of the input.

$3

Only with placeholderFixed. This option helps you to contol the visibility of the fixed placeholder.




$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