{"id":13437214,"url":"https://github.com/insin/react-maskedinput","last_synced_at":"2025-05-15T04:05:55.556Z","repository":{"id":29129881,"uuid":"32659758","full_name":"insin/react-maskedinput","owner":"insin","description":"Masked \u003cinput/\u003e React component","archived":false,"fork":false,"pushed_at":"2022-10-19T14:18:48.000Z","size":127,"stargazers_count":730,"open_issues_count":62,"forks_count":197,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-05-10T09:39:50.866Z","etag":null,"topics":["inputmask","react","react-component"],"latest_commit_sha":null,"homepage":"http://insin.github.io/react-maskedinput/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"armadaplatform/armada","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/insin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-22T03:06:43.000Z","updated_at":"2025-02-11T15:47:59.000Z","dependencies_parsed_at":"2022-07-27T17:34:38.631Z","dependency_job_id":null,"html_url":"https://github.com/insin/react-maskedinput","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-maskedinput","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-maskedinput/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-maskedinput/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-maskedinput/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/insin","download_url":"https://codeload.github.com/insin/react-maskedinput/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254270646,"owners_count":22042859,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["inputmask","react","react-component"],"created_at":"2024-07-31T03:00:55.104Z","updated_at":"2025-05-15T04:05:50.537Z","avatar_url":"https://github.com/insin.png","language":"JavaScript","readme":"# `MaskedInput`\n\nA [React](http://facebook.github.io/react/) component for `\u003cinput\u003e` 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```\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) =\u003e {\n    this.setState({[e.target.name]: e.target.value})\n  }\n\n  render() {\n    return \u003cdiv className=\"CreditCardDetails\"\u003e\n      \u003clabel\u003e\n        Card Number:{' '}\n        \u003cMaskedInput mask=\"1111 1111 1111 1111\" name=\"card\" size=\"20\" onChange={this._onChange}/\u003e\n      \u003c/label\u003e\n      \u003clabel\u003e\n        Expiry Date:{' '}\n        \u003cMaskedInput mask=\"11/1111\" name=\"expiry\" placeholder=\"mm/yyyy\" onChange={this._onChange}/\u003e\n      \u003c/label\u003e\n      \u003clabel\u003e\n        CCV:{' '}\n        \u003cMaskedInput mask=\"111\" name=\"ccv\" onChange={this._onChange}/\u003e\n      \u003c/label\u003e\n    \u003c/div\u003e\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 \u003cMaskedInput\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  /\u003e\n}\n```\n\n## Props\n\n### `mask` : `string`\n\nThe masking pattern to be applied to the `\u003cinput\u003e`.\n\nSee the [inputmask-core docs](https://github.com/insin/inputmask-core#pattern) for supported formatting characters.\n\n### `onChange` : `(event: SyntheticEvent) =\u003e 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 `\u003cinput\u003e` 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 `\u003cinput\u003e`'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 `\u003cinput\u003e`, 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` \u0026 `onPaste` - will each trigger a call to `onChange` when necessary\n\n## MIT Licensed\n","funding_links":[],"categories":["Uncategorized","UI Components","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Uncategorized","Form Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Freact-maskedinput","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finsin%2Freact-maskedinput","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Freact-maskedinput/lists"}