{"library":"react-imask","title":"React IMask Plugin","description":"react-imask is a React-specific plugin for the robust imask.js library, providing components and hooks to easily integrate input masking into React applications. The current stable version is 7.6.1, with minor releases occurring every few weeks, indicating active development. It differentiates itself by offering dedicated React components like IMaskInput, a Higher-Order Component IMaskMixin for extending existing inputs, and the useIMask hook for functional components. It emphasizes onAccept as the primary event handler for masked value changes, explicitly warning against the common React pattern of using onChange for this purpose. The core imask.js library underpins its powerful masking capabilities, including Number, Pattern, Enum, and Dynamic masks, alongside features like autofix, repeat blocks, and improved IME support.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-imask"],"cli":null},"imports":["import { IMaskInput } from 'react-imask';","import { IMaskMixin } from 'react-imask';","import { useIMask } from 'react-imask';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { useRef } from 'react';\nimport { IMaskInput } from 'react-imask';\n\nfunction MyMaskedInput() {\n  // use ref to get access to internal \"masked = ref.current.maskRef\"\n  const ref = useRef(null);\n  const inputRef = useRef(null);\n\n  return (\n    <IMaskInput\n      mask={Number}\n      radix=\".\"\n      value=\"12345\"\n      unmask={true} // true|false|'typed'\n      ref={ref}\n      inputRef={inputRef}  // access to nested input\n      // DO NOT USE onChange TO HANDLE CHANGES! USE onAccept INSTEAD\n      onAccept={\n        // depending on prop above first argument is\n        // `value` if `unmask=false`,\n        // `unmaskedValue` if `unmask=true`,\n        // `typedValue` if `unmask='typed'`\n        (value, mask) => {\n          console.log('Accepted value:', value);\n          // Example: You might update a state variable here\n          // setStateValue(value);\n        }\n      }\n      // You can also pass input props directly\n      placeholder='Enter number here'\n      min={0}\n      max={99999}\n    />\n  );\n}\n\nexport default MyMaskedInput;\n","lang":"typescript","description":"This quickstart demonstrates the basic usage of the IMaskInput component, showing how to apply a Number mask, access internal refs, and correctly handle changes using the onAccept prop instead of onChange.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}