{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-text-mask"],"cli":null},"imports":["import MaskedInput from 'react-text-mask'","const MaskedInput = require('react-text-mask')"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}