{"_id":"@zeit/react-maskedinput","_rev":"317-5f0ce695948ae0aadbd6778e58bfdfd2","name":"@zeit/react-maskedinput","dist-tags":{"latest":"4.0.1"},"versions":{"4.0.1":{"name":"@zeit/react-maskedinput","version":"4.0.1","keywords":["react","masked","input","react-component"],"author":{"name":"Jonny Buchanan","email":"jonathan.buchanan@gmail.com"},"license":"MIT","_id":"@zeit/react-maskedinput@4.0.1","maintainers":[{"name":"nkzawa","email":"naoyuki.kanezawa@gmail.com"}],"homepage":"https://github.com/insin/react-maskedinput","bugs":{"url":"https://github.com/insin/react-maskedinput/issues"},"dist":{"shasum":"a9de67f02c44cfb3dd152fc4dd20c6c4f027cc72","tarball":"https://registry.npmjs.org/@zeit/react-maskedinput/-/react-maskedinput-4.0.1.tgz","integrity":"sha512-9qDnMCRl1Y8dJnt7vsXH8sSmSBLlCNfDYeOM+ddCjdd8K2hIzbMknvzGo921dRr8fQ0GZI7idaBwzsJlzyp72g==","signatures":[{"sig":"MEYCIQCsf94sEF6p6lYixhbbNS55XsbeFa6kY1zDocih5Et7tgIhANEuTvPyN8kqrmgXdop2Ejx4/U5T4R768HK0xeTbGPWf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","files":["es","lib","umd"],"module":"es/index.js","gitHead":"8ba0d290742a55bc819e3a39a3aec968d3ac7668","scripts":{"lint":"eslint src tests","test":"nwb test-react","build":"nwb build-react-component","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","posttest":"npm run lint","test:watch":"nwb test-react --server"},"_npmUser":{"name":"nkzawa","email":"naoyuki.kanezawa@gmail.com"},"deprecated":"This package is no longer maintained","repository":{"url":"git+ssh://git@github.com/insin/react-maskedinput.git","type":"git"},"_npmVersion":"5.5.1","description":"Masked <input/> React component","directories":{},"_nodeVersion":"9.2.0","dependencies":{"prop-types":"^15.5.7","inputmask-core":"^2.1.1"},"devDependencies":{"nwb":"0.17.x","react":"15.x","react-dom":"15.x","eslint-config-jonnybuchanan":"5.0.x"},"peerDependencies":{"react":"^0.14.9 || ^15.3.0 || ^16.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-maskedinput-4.0.1.tgz_1511766726900_0.10171457100659609","host":"s3://npm-registry-packages"}}},"time":{"created":"2017-11-27T07:12:07.153Z","modified":"2026-02-25T04:28:45.975Z","4.0.1":"2017-11-27T07:12:07.153Z"},"bugs":{"url":"https://github.com/insin/react-maskedinput/issues"},"author":{"name":"Jonny Buchanan","email":"jonathan.buchanan@gmail.com"},"license":"MIT","homepage":"https://github.com/insin/react-maskedinput","keywords":["react","masked","input","react-component"],"repository":{"url":"git+ssh://git@github.com/insin/react-maskedinput.git","type":"git"},"description":"Masked <input/> React component","maintainers":[{"email":"infra+release@vercel.com","name":"vercel-release-bot"},{"email":"team@zeit.co","name":"zeit-bot"}],"readme":"# `MaskedInput`\n\nA [React](http://facebook.github.io/react/) component for `<input>` masking, built on top of [inputmask-core](https://github.com/insin/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`MaskedInput` can be used on the server, or bundled for the client using an npm-compatible packaging system such as [Browserify](http://browserify.org/) or [webpack](http://webpack.github.io/).\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` (>= 0.14.0) 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\nvar React = require('react')\nvar MaskedInput = require('react-maskedinput')\n\nvar CreditCardDetails = React.createClass({\n  state: {\n    card: '',\n    expiry: '',\n    ccv: ''\n  },\n\n  _onChange(e) {\n    var stateChange = {}\n    stateChange[e.target.name] = e.target.value\n    this.setState(stateChange)\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\nvar CustomInput = React.createClass({\n  render() {\n    return <MaskedInput\n      mask=\"1111-WW-11\"\n      placeholder=\"1234-WW-12\"\n      size=\"11\"\n      {...this.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\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/insin/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/insin/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/insin/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","users":{"sergiodxa":true}}