{"id":11746,"library":"react-maskedinput","title":"React Masked Input Component","description":"react-maskedinput is a React component designed to facilitate masked input fields, enabling developers to enforce specific input patterns for data like phone numbers, dates, or credit card numbers. It is built on top of the `inputmask-core` library for its core masking logic. The current stable version is 4.0.1, released in January 2018. Due to its age and the last release date, the project's release cadence is irregular and it appears to be largely unmaintained. Key features include support for custom format characters and controlled component behavior through the `value` prop. A significant note from the author indicates, \"This project has never been used by its author, other than while making it,\" which might suggest limited real-world testing or ongoing support. Developers should consider its age and potential compatibility issues with modern React versions and ecosystems.","status":"abandoned","version":"4.0.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/insin/react-maskedinput","tags":["javascript","react","masked","input","react-component"],"install":[{"cmd":"npm install react-maskedinput","lang":"bash","label":"npm"},{"cmd":"yarn add react-maskedinput","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-maskedinput","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications.","package":"react","optional":false}],"imports":[{"note":"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.","wrong":"const MaskedInput = require('react-maskedinput')","symbol":"MaskedInput","correct":"import MaskedInput from 'react-maskedinput'"},{"note":"The component is exported as a default export, not a named export.","wrong":"import { MaskedInput } from 'react-maskedinput'","symbol":"MaskedInput","correct":"import MaskedInput from 'react-maskedinput'"}],"quickstart":{"code":"import React from 'react';\nimport MaskedInput from 'react-maskedinput';\n\nclass CreditCardDetails extends React.Component {\n  state = {\n    card: '',\n    expiry: '',\n    ccv: ''\n  };\n\n  _onChange = (e) => {\n    this.setState({ [e.target.name]: e.target.value });\n  };\n\n  render() {\n    return (\n      <div className=\"CreditCardDetails\">\n        <label>\n          Card Number:{' '}\n          <MaskedInput mask=\"1111 1111 1111 1111\" name=\"card\" size=\"20\" onChange={this._onChange} />\n        </label>\n        <label>\n          Expiry Date:{' '}\n          <MaskedInput mask=\"11/1111\" name=\"expiry\" placeholder=\"mm/yyyy\" onChange={this._onChange} />\n        </label>\n        <label>\n          CCV:{' '}\n          <MaskedInput mask=\"111\" name=\"ccv\" onChange={this._onChange} />\n        </label>\n      </div>\n    );\n  }\n}\n\n// Example of a custom masked input wrapper\nfunction CustomAlphaNumericInput(props) {\n  return (\n    <MaskedInput\n      mask=\"AAAA-1111\"\n      placeholder=\"ABCD-1234\"\n      size=\"10\"\n      {...props}\n      formatCharacters={{\n        'A': {\n          validate(char) { return /[a-zA-Z]/.test(char) },\n          transform(char) { return char.toUpperCase() }\n        }\n      }}\n    />\n  );\n}\n\nexport default CreditCardDetails;\n","lang":"javascript","description":"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."},"warnings":[{"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.","message":"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`.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Update all instances where you define an input mask from `pattern=\"...\"` to `mask=\"...\"`.","message":"Version 3.0.0 introduced a significant breaking change: the `pattern` prop was renamed to `mask` to avoid conflicts with the HTML5 `pattern` attribute.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Upgrade your project's React dependency to version 0.14 or newer.","message":"Version 3.0.0 raised the minimum required React version to 0.14.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Always provide an `onChange` handler directly to the `MaskedInput` component if you need to capture its value.","message":"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.","severity":"gotcha","affected_versions":"all"},{"fix":"Exercise caution when using this package in production. Be prepared to fork, maintain, or find an alternative solution if issues arise.","message":"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.","severity":"gotcha","affected_versions":"all"},{"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.","message":"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.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","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.","error":"Warning: MaskedInput: `React.createClass` is deprecated and will be removed in a future version of React. Use JavaScript classes instead."},{"fix":"Change the prop name from `pattern` to `mask` for your input masking definition. For example, `mask=\"1111\"` instead of `pattern=\"1111\"`.","cause":"Attempting to use the deprecated `pattern` prop instead of `mask` for defining the input mask.","error":"Invalid prop `pattern` supplied to `MaskedInput`. Expected `string`."},{"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`.","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.","error":"TypeError: Cannot read properties of undefined (reading 'value') in custom onChange handler (or similar error related to event.target.value)"}],"ecosystem":"npm"}