{"id":23135601,"url":"https://github.com/viewstools/use-masked-input","last_synced_at":"2025-07-25T18:39:02.560Z","repository":{"id":84374128,"uuid":"172364394","full_name":"viewstools/use-masked-input","owner":"viewstools","description":"A React hook to mask an input using text-mask.","archived":false,"fork":false,"pushed_at":"2020-03-15T00:18:07.000Z","size":8,"stargazers_count":16,"open_issues_count":1,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-05T04:07:41.674Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/viewstools.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-24T16:57:44.000Z","updated_at":"2021-08-13T19:24:22.000Z","dependencies_parsed_at":"2023-07-11T08:33:58.685Z","dependency_job_id":null,"html_url":"https://github.com/viewstools/use-masked-input","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/viewstools/use-masked-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viewstools%2Fuse-masked-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viewstools%2Fuse-masked-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viewstools%2Fuse-masked-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viewstools%2Fuse-masked-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/viewstools","download_url":"https://codeload.github.com/viewstools/use-masked-input/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viewstools%2Fuse-masked-input/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267046446,"owners_count":24026904,"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","status":"online","status_checked_at":"2025-07-25T02:00:09.625Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-12-17T12:16:09.051Z","updated_at":"2025-07-25T18:39:02.487Z","avatar_url":"https://github.com/viewstools.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# useMaskedInput\n\nA React hook to mask an input using [text-mask](https://github.com/text-mask/text-mask).\n\nThis component needs React 16.8 or greater because it uses hooks.\n\n## Installation\n\nWith NPM:\n```\nnpm install @viewstools/use-masked-input\n```\n\nWith Yarn:\n```\nyarn add @viewstools/use-masked-input\n```\n\n## Usage\n\n```js\nimport React, { useRef } from 'react'\nimport useMaskedInput from '@viewstools/use-masked-input'\n\nlet PhoneInput = props =\u003e {\n  let input = useRef(null)\n\n  let onChange = useMaskedInput({\n    input,\n    mask: ['(', /[1-9]/, /\\d/, /\\d/, ')', ' ', /\\d/, /\\d/, /\\d/, '-', /\\d/, /\\d/, /\\d/, /\\d/],\n    onChange: props.onChange,\n  })\n\n  return \u003cinput {...props} ref={input} onChange={onChange} /\u003e\n}\n\nexport default PhoneInput\n```\n\n`useMaskedInput` takes an object as its parameter and returns an `onChange`\nfunction you need to pass onto your input as a prop. The hook will manage the value of the input.\n\nHere are the possible configuration values:\n- `input`. *Required*. A reference created by `React.createRef` or `useRef` to the `input` element rendered by React.\n- `mask`. *Required*. An array or a function that defines how the user input is going to be masked. [See more](https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#mask).\n- `onChange`. A function to be called when the input changes.\n- `guide`. A boolean that tells the component whether to be in guide or no guide mode. [See more](https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#guide).\n- `keepCharPositions`. A boolean that when true, adding or deleting characters affects won't affect the position of other characters, if false, it pushes them.  _Defaults to `false`_. [See more](https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#keepcharpositions).\n- `pipe`. A function to modify the conformed value before it is displayed on the screen. [See more](https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#pipe).\n- `placeholderChar`. A string representing the fillable spot in the mask. Defaults to an underscore (`_`). [See more](https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#placeholderchar).\n- `showMask`. A boolean that tells the component to display the mask as a placeholder in place of the regular placeholder when the input element value is empty. _Defaults to `false`_. [See more](https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#showmask).\n- `value`. A string with the value. Defaults to ``.\n```\n\n## Known issues\n[There are some known issues on text-mask](https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#known-issues).\n\n### Supported \u003cinput\u003e types\nPlease note that Text Mask supports input type of text, tel, url, password, and search. Due to a limitation in browser API, other input types, such as email or number, cannot be supported. However, it is normal to let the user enter an email or a number in an input type text combined the appropriate input mask.\n\nLicense BSD-Clause-3\n\nby UXtemple\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviewstools%2Fuse-masked-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fviewstools%2Fuse-masked-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviewstools%2Fuse-masked-input/lists"}