Have ideas to improve npm?Join in the discussion! »

    react-maskedinput-legacy

    3.0.0 • Public • Published

    MaskedInput

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

    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.

    You can find it in the /dist directory.

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

    MIT Licensed

    Install

    npm i react-maskedinput-legacy

    DownloadsWeekly Downloads

    6

    Version

    3.0.0

    License

    MIT

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar