{"id":19534633,"url":"https://github.com/buttercup/react-formatted-input","last_synced_at":"2025-08-21T12:10:45.859Z","repository":{"id":57114422,"uuid":"91370899","full_name":"buttercup/react-formatted-input","owner":"buttercup","description":"An input component that abides by configurable formatting and constraint rules","archived":false,"fork":false,"pushed_at":"2020-10-20T19:12:57.000Z","size":1003,"stargazers_count":29,"open_issues_count":3,"forks_count":12,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-04T20:58:54.082Z","etag":null,"topics":["component","formatting","html-input","input","pattern","reactjs"],"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/buttercup.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2017-05-15T18:26:46.000Z","updated_at":"2023-09-08T17:25:04.000Z","dependencies_parsed_at":"2022-08-22T06:31:21.113Z","dependency_job_id":null,"html_url":"https://github.com/buttercup/react-formatted-input","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/buttercup/react-formatted-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buttercup%2Freact-formatted-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buttercup%2Freact-formatted-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buttercup%2Freact-formatted-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buttercup%2Freact-formatted-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/buttercup","download_url":"https://codeload.github.com/buttercup/react-formatted-input/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buttercup%2Freact-formatted-input/sbom","scorecard":{"id":259250,"data":{"date":"2025-08-11","repo":{"name":"github.com/buttercup/react-formatted-input","commit":"01e31e760eb46167d7fbec01537fbea80afaa575"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.9,"checks":[{"name":"Code-Review","score":1,"reason":"Found 3/18 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 17 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"100 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q","Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx","Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9","Warn: Project is vulnerable to: GHSA-r6rj-9ch6-g264","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9","Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w","Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg","Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96","Warn: Project is vulnerable to: GHSA-3949-f494-cm99","Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx","Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp","Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6","Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-17T10:25:22.431Z","repository_id":57114422,"created_at":"2025-08-17T10:25:22.431Z","updated_at":"2025-08-17T10:25:22.431Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271477988,"owners_count":24766421,"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-08-21T02:00:08.990Z","response_time":74,"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":["component","formatting","html-input","input","pattern","reactjs"],"created_at":"2024-11-11T02:14:55.891Z","updated_at":"2025-08-21T12:10:45.811Z","avatar_url":"https://github.com/buttercup.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-formatted-input\n\u003e An input component that abides by configurable formatting and constraint rules\n\n[![Build Status](https://travis-ci.org/buttercup/react-formatted-input.svg?branch=master)](https://travis-ci.org/buttercup/react-formatted-input) [![npm package](https://img.shields.io/badge/%40buttercup%2Freact--formatted--input-npm-red.svg)](https://www.npmjs.com/package/@buttercup/react-formatted-input)\n\n## About\n\n`FormattedInput` takes a value and ensures that user input conforms to some specified rules. Formatted input instances can have their length limited, as well as having a _pattern_ enforced for their entry. As the user types, changes to the value are forced through the provided pattern and any sections that are invalid are simply stripped. What is returned from the component is a pattern-matched string.\n\nThis is useful for custom inputs that are designed to take values of a certain type, often mapping to real world information like credit card details or dates.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"creditcard.gif\" /\u003e\n\u003c/p\u003e\n\n## Installation\n\nTo install, simply run `npm install @buttercup/react-formatted-input --save` or `yarn add @buttercup/react-formatted-input`.\n\n### Development\n\nYou can run the Storybook to test the component in your browser, by executing `npm run storybook`.\n\n## Usage\n\nImport the `FormattedInput` class and just drop it in:\n\n```javascript\nimport { FormattedInput } from \"@buttercup/react-formatted-input\";\nimport React, { Component } from \"react\";\n\nexport default class MyForm extends Component {\n\n    constructor(props) {\n        super(props);\n        this.state = {\n            idNumber: \"\"\n        };\n    }\n\n    render() {\n        const idPattern = [\n            { char: /\\d/, repeat: 3 },\n            { exactly: \"-\" },\n            { char: /\\d/, repeat: 2 },\n            { char: /[a-z]/i }\n        ];\n        return (\n            \u003cform\u003e\n                \u003cFormattedInput\n                    className=\"formatted-input\"\n                    format={idPattern}\n                    value={this.state.idNumber}\n                    onChange={(formattedValue, raw) =\u003e { this.state.idNumber = formattedValue; }}\n                    placeholder=\"ID in format: NNN-NNL\"\n                    /\u003e\n            \u003c/form\u003e\n        );\n    }\n\n}\n```\n\nThere is also a `FormattedText` class which simply outputs a text node:\n\n```javascript\nimport React from \"react\";\nimport { FormattedText } from \"@buttercup/react-formatted-input\";\n\n// MM/YYYY\nconst DateFormat = [\n    { char: /[01]/, repeat: 1 },\n    { char: /\\d/, repeat: 1 },\n    { exactly: \"/\" },\n    { char: /2/, repeat: 1 },\n    { char: /\\d/, repeat: 3 }\n];\n\nconst MyComponent = () =\u003e (\n    \u003cspan\u003e\n        \u003cFormattedText value=\"01/2019\" format={DateFormat} /\u003e\n    \u003c/span\u003e\n);\n```\n\nYou can also import just the `format` function:\n\n```javascript\nimport { format } from \"@buttercup/react-formatted-input\";\n\nconst USPhoneNumberFormat = [\n    { char: /\\d/, repeat: 3 },\n    { exactly: \"-\" },\n    { char: /\\d/, repeat: 3 },\n    { exactly: \"-\" },\n    { char: /\\d/, repeat: 4 }\n];\n\nconst { formatted, raw } = format(\"2025550199\", USPhoneNumberFormat);\n// formatted = 202-555-0199\n// raw = 2025550199\n```\n\n### Regular expression alternatives\n\nAs Regular Expression instances don't serialise, it's possible to use a string or array to describe the pattern:\n\n```javascript\nconst format1 = [{ char: \"\\\\w\", repeat: 5 }];\n\nconst format2 = [{ char: [\"[a-f0-9]\", \"i\"], repeat: 5 }];\n```\n\n_The second value in the array is the flag string for the `RegExp` constructor._\n\n### Presets\n\nSome presets are available in the `source/presets.js` file that might be used like so:\n\n```javascript\nimport { FormattedInput, Presets } from \"@buttercup/react-formatted-input\";\nimport React, { Component } from \"react\";\n\nexport default class MyForm extends Component {\n\n    render() {\n        return (\n            \u003cform\u003e\n                \u003cFormattedInput\n                    format={Presets.CreditCard}\n                    value={this.state.creditCardNo}\n                    /\u003e\n                \u003cFormattedInput\n                    format={Presets.CreditCardDate}\n                    value={this.state.creditCardValidFrom}\n                    /\u003e\n                \u003cFormattedInput\n                    format={Presets.CreditCardDate}\n                    value={this.state.creditCardExpiry}\n                    /\u003e\n            \u003c/form\u003e\n        );\n    }\n\n}\n```\n\n## API\nThe `FormattedInput` component can be used without any props, of course, but you might want some of these for it to be useful:\n\n### value _: String_\nThe initialisation value for the formatted input. This value is still run through the formatting process, so it is possible that the applied value is different to the one provided.\n\n### format _: Array_\nThe format is a collection of patterns and delimiters that control what values can be entered. By default there is no format (so any input is allowed), but it can be set to an array of objects that are used to process the value upon every change:\n\n * **Character match** groups: A character match (`char`) is a regular expression designed to match just 1 character. It may also contain a `repeat` property to specify how many characters this pattern should match. `repeat` defaults to `1` if not specified. For example, `{ char: /\\d/ }` will match exactly 1 number, whereas `{ char: /-/, repeat: 3 }` will match 3 dashes.\n * **Exact** groups: An exact group represents a string or character that must come next in the value. It is used to specify mandatory delimiters in the value. For instance, `{ exactly: \".\" }` will enforce that a period appears next in the value. Exact groups also support the `repeat` property. Characters added using exact groups **do not appear in raw values**.\n\nWhen used in combination together, complex values like credit-card numbers can be easily represented:\n\n```javascript\n[\n    { char: /\\d/, repeat: 4 },\n    { exactly: \"-\" },\n    { char: /\\d/, repeat: 4 },\n    { exactly: \"-\" },\n    { char: /\\d/, repeat: 4 },\n    { exactly: \"-\" },\n    { char: /\\d/, repeat: 4 }\n]\n```\n\nOr even the expiry date of such a credit card:\n\n```javascript\n[\n    { char: /[01]/ },  // month, 2 digits\n    { char: /[0-9]/ }, // \"\n    { exactly: \"/\" },\n    { char: /2/ },                  // year, 4 digits\n    { char: /[0-9]/, repeat: 3 }    // \"\n]\n```\n\n### onChange _: Function_\nA callback function for when the value changes. The function receives 2 parameters: the new formatted value and the new raw value, respectively. The function is only called if the formatted value differs from the last one.\n\n### type _: String_\nThe input type to use (defaults to \"text\"). The type \"password\" is also supported, but this **disables formatting**.\n\n### name, placeholder, className\nFormatted input instances pass through these props to the underlying `\u003cinput\u003e` element.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuttercup%2Freact-formatted-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuttercup%2Freact-formatted-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuttercup%2Freact-formatted-input/lists"}