Skip to content

duncanenman/react-maskedinput

This branch is 2 commits ahead of insin/react-maskedinput:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

204818c · Aug 20, 2021
Jan 26, 2018
May 18, 2020
Jul 4, 2017
Mar 7, 2016
Jul 4, 2017
Jul 4, 2017
May 18, 2020
May 18, 2020
Jan 24, 2018
Mar 25, 2015
Jan 26, 2018
Jan 24, 2018
Aug 20, 2021

Repository files navigation

MaskedInput

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

This project has never been used by its author, other than while making it.

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.

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

About

Masked <input/> React component

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%