react-maskedinput-ultimate

Based on: react-maskedinput.

And: inputmask-core

A React component for <input> masking, built on top of .

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

Usage

Give MaskedInput a mask and an onChange callback:

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 <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:

let formatters = {
      'W': {
        validate(char) { return /\w/.test(char ) },
        transform(char) { return char.toUpperCase() }
      }
    }
const CustomInput = (props) => (
  <MaskedInput
    mask="1111-WW-11"
    placeholder="1234-WW-12"
    size="11"
    {....props}
    formatCharacters={formatters}/>
);

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.

isRevealingMask : boolean

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.

placeholderFixed : string

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.

classWrapper : string

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

classPlaceholder : string

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

hidePlaceholder : boolean

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

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 to onChange when necessary

MIT Licensed