{"id":20021258,"url":"https://github.com/tiendq/filtered-input","last_synced_at":"2025-07-18T07:07:15.858Z","repository":{"id":57236064,"uuid":"77421313","full_name":"tiendq/filtered-input","owner":"tiendq","description":"A simple input that only accepts characters based on a Regex pattern","archived":false,"fork":false,"pushed_at":"2018-05-05T01:43:35.000Z","size":63,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-15T20:47:28.766Z","etag":null,"topics":["es6","form","npm","react","validation"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/tiendq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-27T03:00:12.000Z","updated_at":"2023-01-13T08:13:44.000Z","dependencies_parsed_at":"2022-08-23T16:20:18.415Z","dependency_job_id":null,"html_url":"https://github.com/tiendq/filtered-input","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/tiendq/filtered-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiendq%2Ffiltered-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiendq%2Ffiltered-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiendq%2Ffiltered-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiendq%2Ffiltered-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tiendq","download_url":"https://codeload.github.com/tiendq/filtered-input/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiendq%2Ffiltered-input/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265716306,"owners_count":23816354,"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":["es6","form","npm","react","validation"],"created_at":"2024-11-13T08:36:03.256Z","updated_at":"2025-07-18T07:07:15.829Z","avatar_url":"https://github.com/tiendq.png","language":"JavaScript","readme":"# filtered-input\nA simple input that only accepts characters based on a Regex pattern. My intention is just limiting characters could be entered into an input field, no masking capability, no formatting etc.\n\n## Usage\nSimply install and import component like below code:\n\n`yarn add filtered-input`\n\n```js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport FilteredInput from 'filtered-input';\n\nReactDOM.render(\n  \u003cform action=\"index.html\" method=\"post\" noValidate\u003e\n    \u003cFilteredInput id=\"fullname\" name=\"fullname\" type=\"text\" filterPattern=\"^[a-z\\s]+$\" validatePattern=\"^[a-z\\s]{5,20}$\" onChange={onChange} /\u003e\n  \u003c/form\u003e, document.getElementById(\"root\")\n);\n```\n\n### Properties\nBesides below properties, you could add any HTML input attributes as usual except `value`.\n\n#### `type`\nInput type e.g. text, email. `Required`\n\n#### `filterPattern`\nA RegEx pattern to filter which characters are allowed to enter in the input. `Required`\n\n#### `validatePattern`\nA RegEx pattern to validate current input value, relied on [validator.matches](https://github.com/chriso/validator.js). `Required`\n\n#### `onChange`\nCalled on change event with current `value` and validation result `passed` if `validatePattern` is supplied. You could use it to get input value or change input control appearance based its validation state.\n\n#### `customFormatter`\nCalled with current `value` to provide formatting capability e.g. 5000 becomes 5,000\n\n## Examples\n1. Run `yarn start` from `examples` folder\n2. Visit `http://localhost:8080`\n\n\nCopyright (c) 2016 Tien Do\n\nMIT License\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiendq%2Ffiltered-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftiendq%2Ffiltered-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiendq%2Ffiltered-input/lists"}