Registry / web-framework / react-input-mask

react-input-mask

library2.0.4jsnpmunverified

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.

web-framework http-networking

npm install react-input-mask

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-INPUT-MASK

react-input-mask

web-frameworkjavascriptv2.0.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

InputMask

✓ import InputMask from 'react-input-mask';

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

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;

Debug

Known issues

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

affects: >=2.0.0

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

affects: <2.0.0

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

affects: <2.0.0-beta.4

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

affects: >=2.0.4

Errors

Common errors & fixes

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

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; }'.

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.

Upgrade

Version history

2.0.4latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for any React component.

react-domrequiredPeer dependency required for rendering React components.

Agent activity

10 hits · last 30 days

node

Resources

githubhttps://github.com/sanniassin/react-input-mask ↗

packagehttps://www.npmjs.com/package/react-input-mask ↗