{"_id":"@alan-seymour/react-maskedinput","_rev":"1-d8a5d8d02512d0699522f346e1a684cf","name":"@alan-seymour/react-maskedinput","dist-tags":{"latest":"5.0.4"},"versions":{"5.0.4":{"name":"@alan-seymour/react-maskedinput","version":"5.0.4","description":"Masked <input/> React component","main":"lib/MaskedInput.js","scripts":{"build":"rm -rf ./lib && tsc","lint":"eslint src tests","start":"nwb serve-react-demo","test":"nwb test-react","posttest":"npm run lint","test:watch":"nwb test-react --server"},"dependencies":{"@jaredrolt/inputmask-core":"^3.0.1"},"peerDependencies":{"react":"^0.14.9 || ^15.3.0 || ^16.0.0"},"devDependencies":{"@types/react":"^16.9.34","@types/react-dom":"^16.9.7","eslint-config-jonnybuchanan":"5.0.x","nwb":"0.21.x","react":"^16.13.1","react-dom":"16.x","typescript":"^3.8.3"},"author":{"name":"Jared Rolt","email":"jrolt92@gmail.com"},"contributors":[{"name":"Alan Seymour","email":"hello@alanseymour.net"}],"homepage":"https://github.com/alan-seymour/react-maskedinput","license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/alan-seymour/react-maskedinput.git"},"keywords":["react","masked","input","react-component"],"bugs":{"url":"https://github.com/alan-seymour/react-maskedinput/issues"},"directories":{"lib":"lib","test":"tests"},"gitHead":"0dfd950e36c4e6b3fe2d65d82d0beab73ca2b5af","_id":"@alan-seymour/react-maskedinput@5.0.4","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-i1NTVDkDtqLstvpmyiKX6fR8/1XWmwZvHkMj4Ge5KljdbTBfKCO02Tw6Y7diQEzXj3giSfwIuBtdGoWczZqc6w==","shasum":"afd8efdb30bc808428556659373448cc1953b475","tarball":"https://registry.npmjs.org/@alan-seymour/react-maskedinput/-/react-maskedinput-5.0.4.tgz","fileCount":12,"unpackedSize":30438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJg/uCRA9TVsSAnZWagAAEwcQAJIignxLtsade7JPohHF\nS7/6hdyLMFJg0hp1FoHLUpuLYbM2G8x14ftYM0woDMlk8zrLI/zXPGnOPq4r\nHLkmweihxhaR7Vw3hvBas/QHU9yZHAmyjUYM+1UD1RVCk5tmeHRgFKTff7Af\nJ0pU4QtpZycNjm9tWNH2mExJPrE3iJ5kRw+/njh3+xAjEn2LQ2mE9yaptazF\nZ0+kIlM72EfoRkbob8BSOiUVH4mM8cWnSnWdmaxAWpR5aPASL+iLw4jgxBKC\nCzweS0aMumTm7J2YAjzg+mAr4obPJ69TpYeG7CbrsKwFw63VLTZB5elpwzwY\nNJ3Y2yAmdfsnW+9cuEGZfM12zdQqNVJ5xi4CxK1vAd/I7EBN9m9thi1M71Ax\ncY82M25r6sHoNe0FZmVViaEtbs911H+B1+WB8Vc0Gvxsc7e3jVYi7l+p9cAX\nBxhVsqOS/09n0KXbg+nOBTagfrcQXqSzAY2XJ7bFSgWv/W6Q+zT+eyxK/TTj\n6iP6wk38kDN43MF4ChW+3UOctx7NOw1qiXiY6K1CNmUfRwhxeIuyKD7l9NTm\n2UYoKVD11eC7BfSUd7z7uGIG0HyOjD8JvPRWmol2JBkjlgB3Bv1OU6oLMPqM\nlBqm6XLtyTAX2JnqLPtYJt4OqLInoSIhPkHES9AxOh5a5lsJjYi7yLkNwtZX\nnjAS\r\n=wQrQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBYc7+851P5MppdKfRk7734ggVRayNLRsyEl2qS/gI02AiEAqUdMcFdf45Xak+aFnUFeN3og/G4cJ9v6B2g+44JR9vc="}]},"_npmUser":{"name":"alan-seymour","email":"hello@alanseymour.dev"},"maintainers":[{"name":"alan-seymour","email":"hello@alanseymour.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-maskedinput_5.0.4_1613107182227_0.37903655695629523"},"_hasShrinkwrap":false}},"time":{"created":"2021-02-12T05:19:42.193Z","5.0.4":"2021-02-12T05:19:42.407Z","modified":"2022-04-04T12:32:55.437Z"},"maintainers":[{"name":"alan-seymour","email":"hello@alanseymour.dev"}],"description":"Masked <input/> React component","homepage":"https://github.com/alan-seymour/react-maskedinput","keywords":["react","masked","input","react-component"],"repository":{"type":"git","url":"git+ssh://git@github.com/alan-seymour/react-maskedinput.git"},"contributors":[{"name":"Alan Seymour","email":"hello@alanseymour.net"}],"author":{"name":"Jared Rolt","email":"jrolt92@gmail.com"},"bugs":{"url":"https://github.com/alan-seymour/react-maskedinput/issues"},"license":"MIT","readme":"# `MaskedInput`\n\nThis is a Typescript clone of [https://github.com/insin/react-maskedinput](https://github.com/insin/react-maskedinput)\n\nA [React](http://facebook.github.io/react/) component for `<input>` masking, built on top of [inputmask-core](https://github.com/jaredrolt/inputmask-core).\n\n![This project has never been used by its author, other than while making it.](https://img.shields.io/badge/author--usage-never-red.png \"This project has never been used by its author, other than while making it\")\n\n## [Live Demo](http://insin.github.io/react-maskedinput/)\n\n## Install\n\n### npm\n\n```\nnpm install react-maskedinput --save\n```\n\n### Browser bundle\n\nThe browser bundle exposes a global `MaskedInput` variable and expects to find a global `React` variable to work with.\n\n* [react-maskedinput.js](https://unpkg.com/react-maskedinput/umd/react-maskedinput.js) (development version)\n* [react-maskedinput.min.js](https://unpkg.com/react-maskedinput/umd/react-maskedinput.min.js) (compressed production version)\n\n## Usage\n\nGive `MaskedInput` a [`mask`](#mask-string) and an `onChange` callback:\n\n```javascript\nimport React from 'react'\nimport MaskedInput from 'react-maskedinput'\n\nclass CreditCardDetails extends React.Component {\n  state = {\n    card: '',\n    expiry: '',\n    ccv: ''\n  }\n\n  _onChange = (e) => {\n    this.setState({[e.target.name]: e.target.value})\n  }\n\n  render() {\n    return <div className=\"CreditCardDetails\">\n      <label>\n        Card Number:{' '}\n        <MaskedInput mask=\"1111 1111 1111 1111\" name=\"card\" size=\"20\" onChange={this._onChange}/>\n      </label>\n      <label>\n        Expiry Date:{' '}\n        <MaskedInput mask=\"11/1111\" name=\"expiry\" placeholder=\"mm/yyyy\" onChange={this._onChange}/>\n      </label>\n      <label>\n        CCV:{' '}\n        <MaskedInput mask=\"111\" name=\"ccv\" onChange={this._onChange}/>\n      </label>\n    </div>\n  }\n}\n```\n\nCreate some wrapper components if you have a masking configuration which will be reused:\n\n```javascript\nfunction CustomInput(props) {\n  return <MaskedInput\n    mask=\"1111-WW-11\"\n    placeholder=\"1234-WW-12\"\n    size=\"11\"\n    {...props}\n    formatCharacters={{\n      'W': {\n        validate(char) { return /\\w/.test(char ) },\n        transform(char) { return char.toUpperCase() }\n      }\n    }}\n  />\n}\n```\n\n## Props\n\n### `mask` : `string`\n\nThe masking pattern to be applied to the `<input>`.\n\nSee the [inputmask-core docs](https://github.com/jaredrolt/inputmask-core#pattern) for supported formatting characters.\n\n### `onChange` : `(event: SyntheticEvent) => any`\n\nA callback which will be called any time the mask's value changes.\n\nThis will be passed a `SyntheticEvent` with the input accessible via `event.target` as usual.\n\n**Note:** this component currently calls `onChange` directly, it does not generate an `onChange` event which will bubble up like a regular `<input>` component, so you *must* pass an `onChange` if you want to get a value back out.\n\n### `formatCharacters`: `Object`\n\nCustomised format character definitions for use in the pattern.\n\nSee the [inputmask-core docs](https://github.com/jaredrolt/inputmask-core#formatcharacters) for details of the structure of this object.\n\n### `placeholderChar`: `string`\n\nCustomised placeholder character used to fill in editable parts of the pattern.\n\nSee the [inputmask-core docs](https://github.com/jaredrolt/inputmask-core#placeholderchar--string) for details.\n\n### `value` : `string`\n\nA default value for the mask.\n\n### `placeholder` : `string`\n\nA default `placeholder` will be generated from the mask's pattern, but you can pass a `placeholder` prop to provide your own.\n\n### `size` : `number | string`\n\nBy default, the rendered `<input>`'s `size` will be the length of the pattern, but you can pass a `size` prop to override this.\n\n### Other props\n\nAny other props passed in will be passed as props to the rendered `<input>`, except for the following, which are managed by the component:\n\n* `maxLength` - will always be equal to the pattern's `.length`\n* `onKeyDown`, `onKeyPress` & `onPaste` - will each trigger a call to `onChange` when necessary\n\n## MIT Licensed\n","readmeFilename":"README.md"}