React Masked Input Component

Common errors

• Warning: MaskedInput: `React.createClass` is deprecated and will be removed in a future version of React. Use JavaScript classes instead.

  cause Using an older version of React that relies on `createClass` while `react-maskedinput` v4.0.0+ expects modern React class components, or your build setup is incompatible.
  fix Ensure your React project is on a version compatible with `React.Component` (React 0.14.9, 15.3.0, or 16.x) and that your build tools correctly transpile JavaScript classes.

• Invalid prop `pattern` supplied to `MaskedInput`. Expected `string`.

  cause Attempting to use the deprecated `pattern` prop instead of `mask` for defining the input mask.
  fix Change the prop name from `pattern` to `mask` for your input masking definition. For example, `mask="1111"` instead of `pattern="1111"`.

• TypeError: Cannot read properties of undefined (reading 'value') in custom onChange handler (or similar error related to event.target.value)

  cause The `MaskedInput` component's `onChange` behavior is non-standard; it doesn't always provide a `SyntheticEvent` with a `target` property directly mirroring a native input. It calls your handler with an event-like object where `e.target` refers to the input element itself.
  fix Ensure your `onChange` handler correctly accesses `e.target.value` or `e.target.name` (as shown in the quickstart), understanding that the `e` object might not be a full `SyntheticEvent`.

Warnings

• breaking In v4.0.0, the package transitioned from `React.createClass` to `React.Component` and from `React.PropTypes` to the `prop-types` package. This requires React 0.14.9, 15.3.0, or 16.x and might break older applications using `createClass`.
  Fix: Ensure your React version meets the new `peerDependencies` (`^0.14.9 || ^15.3.0 || ^16.0.0`). If you were extending the component, ensure your code is updated to use modern React class components or functional components.
• breaking Version 3.0.0 introduced a significant breaking change: the `pattern` prop was renamed to `mask` to avoid conflicts with the HTML5 `pattern` attribute.
  Fix: Update all instances where you define an input mask from `pattern="..."` to `mask="..."`.
• breaking Version 3.0.0 raised the minimum required React version to 0.14.
  Fix: Upgrade your project's React dependency to version 0.14 or newer.
• gotcha The `onChange` callback on `MaskedInput` is called directly by the component and does not generate a standard React `SyntheticEvent` that would bubble up like a regular `<input>`. You *must* pass an `onChange` prop to retrieve the input's value.
  Fix: Always provide an `onChange` handler directly to the `MaskedInput` component if you need to capture its value.
• gotcha The package includes a badge stating, 'This project has never been used by its author, other than while making it.' This suggests a potential lack of real-world testing and ongoing support from the original author, which could impact stability or maintenance.
  Fix: Exercise caution when using this package in production. Be prepared to fork, maintain, or find an alternative solution if issues arise.
• gotcha The project's last update was in early 2018. This makes it potentially incompatible with newer React features, APIs, and the broader JavaScript ecosystem, including modern build tools and TypeScript versions, and may contain unpatched security vulnerabilities.
  Fix: Thoroughly test compatibility with your current React version and build setup. Consider exploring more actively maintained alternatives for critical applications or those requiring modern features.

Install

• npm install react-maskedinput npm
• yarn add react-maskedinput yarn
• pnpm add react-maskedinput pnpm

Imports

• MaskedInput
  wrong:

  const MaskedInput = require('react-maskedinput')

  correct:

  import MaskedInput from 'react-maskedinput'

  This component is primarily used in modern React applications, which typically utilize ES modules. While CommonJS `require` might work in some older setups, `import` is the idiomatic way.
• MaskedInput
  wrong:

  import { MaskedInput } from 'react-maskedinput'

  correct:

  import MaskedInput from 'react-maskedinput'

  The component is exported as a default export, not a named export.

Quickstart

This quickstart demonstrates how to integrate `MaskedInput` components into a React class component for various masked inputs like credit card numbers, expiry dates, and CCVs. It also shows how to define custom mask characters.

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>
    );
  }
}

// Example of a custom masked input wrapper
function CustomAlphaNumericInput(props) {
  return (
    <MaskedInput
      mask="AAAA-1111"
      placeholder="ABCD-1234"
      size="10"
      {...props}
      formatCharacters={{
        'A': {
          validate(char) { return /[a-zA-Z]/.test(char) },
          transform(char) { return char.toUpperCase() }
        }
      }}
    />
  );
}

export default CreditCardDetails;