Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-maskedinput

Package Overview
Dependencies
Maintainers
3
Versions
20
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-maskedinput

Masked React component

  • 4.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
20K
decreased by-8.12%
Maintainers
3
Weekly downloads
 
Created
Source

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.

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.

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

Keywords

FAQs

Package last updated on 26 Jan 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc