npm package 'react-maskedinput'

Activity

What's new in version 4.0.1

Delta between version 4.0.0 and version 4.0.1

Source: Github

Commits:

• 0efd70261ad5463ef40c9140ef553e1f79453df9, October 20, 2017 1:23 PM:

  Include React 16 in peerDependencies (#115)

• 9865ec5b5b4265adb50bd3fe14015e8f1c6df3b6, October 20, 2017 1:26 PM:

  Fix wrong scope in paste event (#108)

• 79a6456fe14840c46b2880bccbf629b661c024d8, October 20, 2017 1:26 PM:

  Fix autofill scenarios by using data from onchange events (#112)
  
  Side effects:
    1) Delete behavior now allows removal of more than one character
    2) Cut now shifts remaining characters left instead of leaving "hole"
  
  Also fix binding of this._updateInputSelection (cf. https://github.com/insin/react-maskedinput/pull/110)

• aa2dddae57f9b966602a3cd513456cd9e14e0bda, January 24, 2018 3:09 AM:

  Update devDependencies - nwb@0.21 fixes the UMD build

• ae37ec30f346e44079fefdaffdfc4ea7658eb492, January 24, 2018 3:10 AM:

  Update CHANGES
  
  [ci skip]

• ba46750ad4124449a79cdbe376361f1055324522, January 24, 2018 3:11 AM:

  Add Node.js 8 to test matrix

• be50d5ecc5da78aa0ae4fd3e42fb1e37563ff7f5, January 24, 2018 3:11 AM:

  Fix a typo
  
  [ci skip]

• db7335be221f2c2a262ca630a7461a3d8c214fb6, January 26, 2018 2:41 AM:

  Update syntax in component and examples

• efbb63320bd5f051b163f1f0a5586c746862be41, January 26, 2018 2:47 AM:

  Release v4.0.1

Files changed:

Readme

MaskedInput

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

Live Demo

Install

npm

npm install react-maskedinput --save

Browser bundle

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)

Usage

Give MaskedInput a mask and an onChange callback:

import React from 'react'
import MaskedInput from 'react-maskedinput'

class CreditCardDetails extends React.Component {
  state = {
    card: '',
    expiry: '',
    ccv: ''
  }

  _onChange = (e) => {
    this.setState({[e.target.name]: e.target.value})
  }

  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:

function CustomInput(props) {
  return <MaskedInput
    mask="1111-WW-11"
    placeholder="1234-WW-12"
    size="11"
    {...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