Masked Input Component for React

Common errors

• Warning: A component is changing an uncontrolled input of type text to be controlled.

  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.
  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.

• Property 'mask' does not exist on type 'IntrinsicAttributes & InputMaskProps & { children?: ReactNode; }'.

  cause This TypeScript error occurs when `InputMask` is imported incorrectly, often as a named import (e.g., `{ InputMask }`) when it is a default export.
  fix Change your import statement to `import InputMask from 'react-input-mask';` to correctly import the default component.

Warnings

• breaking 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.
  Fix: Upgrade your React and React-DOM peer dependencies to at least `0.14.0`.
• breaking 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.
  Fix: Upgrade to `react-input-mask` version 2.0.0 or higher to ensure compatibility with modern React versions and StrictMode.
• gotcha 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.
  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.
• gotcha 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.
  Fix: Be aware that community support might be limited, and consider alternatives for projects requiring active development or advanced masking features.

Install

• npm install react-input-mask npm
• yarn add react-input-mask yarn
• pnpm add react-input-mask pnpm

Imports

• InputMask
  wrong:

  import { InputMask } from 'react-input-mask';

  correct:

  import InputMask from 'react-input-mask';

  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.
• InputMask (CJS)

  const InputMask = require('react-input-mask');

  For CommonJS environments, this is the correct way to import the component. Modern bundlers typically handle this when using ES module imports.

Quickstart

Demonstrates a basic phone number input with a mask, using a functional component with React hooks.

import React, { useState } from 'react';
import InputMask from 'react-input-mask';

function PhoneInput() {
  const [phone, setPhone] = useState('');

  const handleChange = (e) => {
    setPhone(e.target.value);
  };

  return (
    <div>
      <label htmlFor="phone-number">Phone Number:</label>
      <InputMask
        mask="+1 (999) 999-9999"
        value={phone}
        onChange={handleChange}
        maskChar="_"
        placeholder="+1 (___) ___-____"
        id="phone-number"
        className="form-input"
      >
        {(inputProps) => <input {...inputProps} type="tel" />}
      </InputMask>
      <p>Current Value: {phone}</p>
    </div>
  );
}

export default PhoneInput;