{"id":11729,"library":"react-input-mask","title":"Masked Input Component for React","description":"react-input-mask provides a simple and effective masked input component for React applications, allowing developers to enforce specific input formats such as phone numbers, dates, or social security numbers. The current stable version is 2.0.4, which was released approximately six years ago. The project appears to be in maintenance mode, with no significant updates since then. Its primary differentiator is its focused scope and direct integration into React workflows, offering a straightforward API for controlling input masking behavior and supporting dynamic mask changes. It's widely adopted for basic input masking requirements in React.","status":"maintenance","version":"2.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/sanniassin/react-input-mask","tags":["javascript","react","input","mask","masked","react-component"],"install":[{"cmd":"npm install react-input-mask","lang":"bash","label":"npm"},{"cmd":"yarn add react-input-mask","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-input-mask","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for any React component.","package":"react","optional":false},{"reason":"Peer dependency required for rendering React components.","package":"react-dom","optional":false}],"imports":[{"note":"The library primarily provides a default export. Version 2.0.0 removed 'ES module' support, which effectively meant consolidating to a default export to avoid confusion with potential named exports.","wrong":"import { InputMask } from 'react-input-mask';","symbol":"InputMask","correct":"import InputMask from 'react-input-mask';"},{"note":"For CommonJS environments, this is the correct way to import the component. Modern bundlers typically handle this when using ES module imports.","wrong":null,"symbol":"InputMask (CJS)","correct":"const InputMask = require('react-input-mask');"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport InputMask from 'react-input-mask';\n\nfunction PhoneInput() {\n  const [phone, setPhone] = useState('');\n\n  const handleChange = (e) => {\n    setPhone(e.target.value);\n  };\n\n  return (\n    <div>\n      <label htmlFor=\"phone-number\">Phone Number:</label>\n      <InputMask\n        mask=\"+1 (999) 999-9999\"\n        value={phone}\n        onChange={handleChange}\n        maskChar=\"_\"\n        placeholder=\"+1 (___) ___-____\"\n        id=\"phone-number\"\n        className=\"form-input\"\n      >\n        {(inputProps) => <input {...inputProps} type=\"tel\" />}\n      </InputMask>\n      <p>Current Value: {phone}</p>\n    </div>\n  );\n}\n\nexport default PhoneInput;\n","lang":"typescript","description":"Demonstrates a basic phone number input with a mask, using a functional component with React hooks."},"warnings":[{"fix":"Upgrade your React and React-DOM peer dependencies to at least `0.14.0`.","message":"Version 2.0.0 dropped support for React 0.13. Projects on older React versions must upgrade React before migrating to `react-input-mask` v2.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Upgrade to `react-input-mask` version 2.0.0 or higher to ensure compatibility with modern React versions and StrictMode.","message":"Older versions of `react-input-mask` might exhibit compatibility issues or warnings with React StrictMode (introduced in React 16.3) due to reliance on deprecated lifecycle methods like `componentWillReceiveProps`. Version 2.0.0 addressed these issues.","severity":"breaking","affected_versions":"<2.0.0"},{"fix":"Avoid setting `maxLength` on the `InputMask` component. If rendering a custom input via `children` function, apply `maxLength` to the underlying input element if truly necessary, but be aware it might conflict with the mask logic.","message":"Using the `maxLength` prop directly on the `InputMask` component can lead to incorrect behavior or console warnings. The mask itself dictates the effective maximum length.","severity":"gotcha","affected_versions":"<2.0.0-beta.4"},{"fix":"Be aware that community support might be limited, and consider alternatives for projects requiring active development or advanced masking features.","message":"The project appears to be in maintenance mode, with the last release (v2.0.4) being several years old. While stable, new features or active bug fixes are unlikely.","severity":"gotcha","affected_versions":">=2.0.4"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Always initialize the state managing the input's value, even if it's an empty string, and ensure the `onChange` handler correctly updates this state. For `react-input-mask`, ensure its `value` prop is consistently bound to a state variable.","cause":"This typically happens in React when an input component switches between being controlled (having a `value` prop) and uncontrolled (not having a `value` prop, or having `defaultValue`). Ensure that the `value` prop is always provided and managed by React state.","error":"Warning: A component is changing an uncontrolled input of type text to be controlled."},{"fix":"Change your import statement to `import InputMask from 'react-input-mask';` to correctly import the default component.","cause":"This TypeScript error occurs when `InputMask` is imported incorrectly, often as a named import (e.g., `{ InputMask }`) when it is a default export.","error":"Property 'mask' does not exist on type 'IntrinsicAttributes & InputMaskProps & { children?: ReactNode; }'."}],"ecosystem":"npm"}