{"id":11881,"library":"react-text-mask","title":"React Text Mask","description":"This package provides a React component, `<MaskedInput>`, for creating input fields that enforce specific formatting patterns on user input. It is part of the larger `text-mask` ecosystem, which offers similar masking solutions for various JavaScript frameworks and vanilla JS. The current stable version for `react-text-mask` is 5.5.0. Releases are typically driven by fixes and minor enhancements across its different framework-specific packages (e.g., React, Vue, Angular), rather than a fixed cadence. A key differentiator is its highly configurable `mask` prop, which accepts an array of characters and regular expressions, allowing for flexible pattern definition. It also supports a `render` prop for advanced customization, enabling integration with styled-components or other custom input wrappers. It aims for full compatibility with standard HTML `<input>` attributes like `className`, `placeholder`, `onBlur`, and `onChange`, simplifying its adoption into existing forms.","status":"active","version":"5.5.0","language":"javascript","source_language":"en","source_url":"https://github.com/text-mask/text-mask","tags":["javascript","react","react-component","text mask","input mask","string mask","input formatting","text formatting","string formatting"],"install":[{"cmd":"npm install react-text-mask","lang":"bash","label":"npm"},{"cmd":"yarn add react-text-mask","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-text-mask","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for the React component to function.","package":"react","optional":false}],"imports":[{"note":"MaskedInput is a default export.","wrong":"import { MaskedInput } from 'react-text-mask'","symbol":"MaskedInput","correct":"import MaskedInput from 'react-text-mask'"},{"note":"CommonJS require pattern for Node.js or older bundlers.","symbol":"MaskedInput (CJS)","correct":"const MaskedInput = require('react-text-mask')"}],"quickstart":{"code":"import React from 'react';\nimport MaskedInput from 'react-text-mask';\n\nconst PhoneNumberInput = () => (\n  <div>\n    <label htmlFor=\"phone-input\">Phone Number:</label>\n    <MaskedInput\n      mask={['(', /[1-9]/, /\\d/, /\\d/, ')', ' ', /\\d/, /\\d/, /\\d/, '-', /\\d/, /\\d/, /\\d/, /\\d/]}\n      className=\"form-control\"\n      placeholderChar=\"_\"\n      placeholder=\"(   )    -    \"\n      guide={true}\n      id=\"phone-input\"\n      onBlur={() => console.log('Input blurred')}\n      onChange={(e) => console.log('Input changed:', e.target.value)}\n    />\n  </div>\n);\n\nexport default PhoneNumberInput;","lang":"javascript","description":"Demonstrates basic usage of `MaskedInput` for phone number formatting, including placeholder, guide, and event handlers."},"warnings":[{"fix":"Set `guide={false}` on the `MaskedInput` component.","message":"The `guide` prop defaults to `true`, which displays the mask's placeholder characters even when the input is empty. If you prefer the input to be completely empty until the user types, set `guide={false}`.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"Ensure `mask` is an array, e.g., `mask={['(', /[1-9]/, ..., ')']}`. For complex dynamic masks, you can provide a function that returns a mask array.","message":"The `mask` prop expects an array of characters and/or regular expressions. Providing a string directly, or an improperly structured array, will lead to unexpected behavior or errors.","severity":"gotcha","affected_versions":">=0.14.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"The `mask` prop must be an array of characters and/or regular expressions, or a function that returns such an array. Wrap the mask pattern in an array, e.g., `mask={['(', /[1-9]/, /\\d/, /\\d/, ')']}`.","cause":"The `mask` prop was provided as a string instead of an array.","error":"Warning: Failed prop type: Invalid prop `mask` of type `string` supplied to `MaskedInput`, expected `array`."},{"fix":"Allow `react-text-mask` to manage the input's value. Use the `onChange` event handler to retrieve the formatted or raw value, but avoid setting the `value` prop after initial mount unless implementing complex controlled component logic with careful state synchronization.","cause":"`react-text-mask` internally manages the input's value to apply the mask. Directly controlling the `value` prop simultaneously with user input can conflict with this internal state management.","error":"Input value cannot be controlled while using a mask."},{"fix":"Ensure the `mask` prop is either an array (e.g., `['a', 'b', 'c']`) or a function that returns an array or `false`. This error often occurs if `mask` is `undefined`, `null`, or an incorrect primitive type.","cause":"The value provided to the `mask` prop is neither an array nor a function.","error":"TypeError: 'mask' must be an array or a function."}],"ecosystem":"npm"}