{"id":18938835,"url":"https://github.com/forge-42/react-input-mask","last_synced_at":"2025-04-15T19:30:32.633Z","repository":{"id":155174522,"uuid":"631619220","full_name":"forge-42/react-input-mask","owner":"forge-42","description":"Input masking for React","archived":false,"fork":false,"pushed_at":"2023-11-11T13:36:21.000Z","size":194,"stargazers_count":35,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T06:35:44.596Z","etag":null,"topics":["input-mask","react","reactjs"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/forge-42.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.MD","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-23T15:40:38.000Z","updated_at":"2025-03-30T00:50:45.000Z","dependencies_parsed_at":"2023-11-11T14:47:03.831Z","dependency_job_id":null,"html_url":"https://github.com/forge-42/react-input-mask","commit_stats":null,"previous_names":["code-forge-net/react-input-mask","forge-42/react-input-mask"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forge-42%2Freact-input-mask","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forge-42%2Freact-input-mask/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forge-42%2Freact-input-mask/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forge-42%2Freact-input-mask/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/forge-42","download_url":"https://codeload.github.com/forge-42/react-input-mask/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249138542,"owners_count":21218904,"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":["input-mask","react","reactjs"],"created_at":"2024-11-08T12:15:35.598Z","updated_at":"2025-04-15T19:30:32.203Z","avatar_url":"https://github.com/forge-42.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Input Mask\n![GitHub Repo stars](https://img.shields.io/github/stars/Code-Forge-Net/react-input-mask?style=social)\n![npm](https://img.shields.io/npm/v/@code-forge/react-input-mask?style=plastic)\n![GitHub](https://img.shields.io/github/license/Code-Forge-Net/react-input-mask?style=plastic)\n![npm](https://img.shields.io/npm/dy/@code-forge/react-input-mask?style=plastic)\n![GitHub issues](https://img.shields.io/github/issues/Code-Forge-Net/react-input-mask?style=plastic)\n![GitHub commit activity](https://img.shields.io/github/commit-activity/m/Code-Forge-Net/react-input-mask?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/Code-Forge-Net/react-input-mask?style=plastic)\n![GitHub top language](https://img.shields.io/github/languages/top/Code-Forge-Net/react-input-mask?style=plastic) \n\nReact Input Mask is an open source library for React that provides an easy way to apply masks to input fields.\n\nMasks can be used to enforce specific formatting for user input, such as phone numbers, social security numbers, and credit card numbers. With React Input Mask, you can define a mask for your input field, and the library will automatically format the user's input according to the specified mask.\n\n## Why React Input Mask?\n\nReact Input Mask is a lightweight library that provides a simple API for applying masks to input fields. It is built on top of React Hooks, and is designed to be used with functional components. It is also compatible with libraries such as react-hook-form.\nThe design philosophy behind React Input Mask is to provide a simple API that is easy to use and understand via a hook instead of\na component.\n\nIt is also designed to be used with Next.js and Remix.run and other server-side rendering frameworks.\n\n## Installation\nReact Input Mask can be installed via npm or yarn:\n\n \n`npm install @code-forge/react-input-mask`\n \n\n`yarn add @code-forge/react-input-mask`\n\n## Usage\nUsing React Input Mask is easy. Simply import the useInputMask hook from the library, and pass the mask prop to the hook. The hook will return an object containing the value and onMouseDown props that you can pass to your input field.\n\n```jsx \nimport React from 'react';\nimport { useInputMask } from '@code-forge/react-input-mask';\n\nconst MyComponent = () =\u003e {\n  const { getInputProps } = useInputMask({ mask: 'One does not simply walk into AAAAAA' });\n  return (\n    \u003cinput name=\"phone\" {...getInputProps()} onChange={e =\u003e {\n      // Your onChange handler gets the output of the hook (won't trigger if the input is invalid)\n      console.log(e.target.value);\n    }} /\u003e\n  );\n};\n```\n\n\nIn the example above, we've applied a mask to fill the word needed to complete the sentence.\n\nYou can customize the mask to fit your needs by using a variety of special characters that represent different types of input. \n\n| Character | Description |\n|-----------|-------------|\n| 9 | Represents a number.|\n| A | Represents a letter. |\n| * | Represents a wildcard. |\n\n## Available Props\n\n| Prop | Type | Description | Default |\n|------|------|-------------|---------|\n| mask | string | The mask to apply to the input field. | undefined |\n| placeholderChar | string | The character to use as a placeholder for the mask characters (eg. 999-999 with placeholderChar set to \"@\" will produce @@@-@@@). | \"_\" |\n| charRegex | RegExp | A regular expression that represents the characters that are allowed to be entered into the input field. | /^[a-zA-Z]*$/|\n| numRegex | RegExp | A regular expression that represents the numbers that are allowed to be entered into the input field. | /^[0-9]*$/ |\n| type | \"raw\" or \"mask\" | The type of value to return from the hook. If set to \"raw\", the hook will return the raw value of the input field (eg. mask 999-999-99 with 111-111-11 will output 11111111). If set to \"mask\", the hook will return the masked value of the input field. (eg. mask 999-999-99 with 111-111-11 will output 111-111-11) | \"raw\" |\n| value | string | The initial value of the input field. (The hook expects to be given a value created by itself, if you provide an invalid value it will try to fill as much of the mask as it can but relies on you to pass it a positive value, otherwise it will default to its default values) | undefined |\n\n## Examples\n\n### Phone Number\n```jsx\nimport React from 'react';\nimport { useInputMask } from '@code-forge/react-input-mask';\n\nconst MyComponent = () =\u003e {\n  const { getInputProps } = useInputMask({ mask: '+(999) 999-9999' });\n  return (\n    \u003cinput name=\"phone\" {...getInputProps()} /\u003e\n  );\n};\n```\n\n### Social Security Number\n```jsx\nimport React from 'react';\nimport { useInputMask } from '@code-forge/react-input-mask';\n\nconst MyComponent = () =\u003e {\n  const { getInputProps } = useInputMask({ mask: '999-99-9999' });\n  return (\n    \u003cinput name=\"ssn\" {...getInputProps()} /\u003e\n  );\n};\n```\n\n### Credit Card Number\n```jsx\nimport React from 'react';\nimport { useInputMask } from '@code-forge/react-input-mask';\n\nconst MyComponent = () =\u003e {\n  const { getInputProps } = useInputMask({ mask: '9999 9999 9999 9999' });\n  return (\n    \u003cinput name=\"cc\" {...getInputProps()} /\u003e\n  );\n};\n```\n\n### Handle keyDown before the mask\n```jsx\nimport React from 'react';\nimport { useInputMask } from '@code-forge/react-input-mask';\n\nconst MyComponent = () =\u003e {\n  const { getInputProps } = useInputMask({ mask: '9999 9999 9999 9999' });\n  const maskProps = getInputProps();\n  return (\n    \u003cinput name=\"cc\" onKeyDown={e =\u003e { \n      // do something\n      maskProps.onKeyDown(e);\n    }} value={maskProps.value} /\u003e\n  );\n};\n```\n\n### Usage with react-hook-form\n\n```jsx\nimport React from 'react';\nimport { useForm } from 'react-hook-form';\nimport { useInputMask } from '@code-forge/react-input-mask';\n\nconst MyComponent = () =\u003e {\n  const { register, handleSubmit } = useForm();\n  const { getInputProps } = useInputMask({ mask: '9999 9999 9999 9999' });\n  return (\n    \u003cform onSubmit={handleSubmit(data =\u003e console.log(data))}\u003e\n      \u003cinput {...register('cc')} {...getInputProps()} /\u003e\n      \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n    \u003c/form\u003e\n  );\n};\n```\n## Support \n\nIf you like the project, please consider supporting us by giving a ⭐️ on Github.\n\n## License\n\nMIT\n\n## Bugs\n\nIf you find a bug, please file an issue on [our issue tracker on GitHub](https://github.com/Code-Forge-Net/react-input-mask/issues)\n\n\n## Contributing\n\nThank you for considering contributing to @code-forge/react-input-mask! We welcome any contributions, big or small, including bug reports, feature requests, documentation improvements, or code changes.\n\nTo get started, please fork this repository and make your changes in a new branch. Once you're ready to submit your changes, please open a pull request with a clear description of your changes and any related issues or pull requests.\n\nPlease note that all contributions are subject to our [Code of Conduct](https://github.com/Code-Forge-Net/react-input-mask/blob/main/CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code.\n\nWe appreciate your time and effort in contributing to react-input-mask and helping to make it a better tool for the community!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforge-42%2Freact-input-mask","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fforge-42%2Freact-input-mask","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforge-42%2Freact-input-mask/lists"}