{"id":34248197,"url":"https://github.com/theadam/react-inform","last_synced_at":"2026-03-10T22:03:12.016Z","repository":{"id":143905557,"uuid":"53168638","full_name":"theadam/react-inform","owner":"theadam","description":"Simple controlled forms with validations in react","archived":false,"fork":false,"pushed_at":"2017-12-04T16:10:47.000Z","size":779,"stargazers_count":81,"open_issues_count":3,"forks_count":13,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-12-19T16:47:52.927Z","etag":null,"topics":["decorators","forms","react","state","validation"],"latest_commit_sha":null,"homepage":"http://theadam.github.io/react-inform/examples/mation-example/","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/theadam.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-03-04T22:08:22.000Z","updated_at":"2024-01-16T14:45:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"0f3dd656-7248-4292-b148-a1c5834a69b3","html_url":"https://github.com/theadam/react-inform","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/theadam/react-inform","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theadam%2Freact-inform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theadam%2Freact-inform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theadam%2Freact-inform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theadam%2Freact-inform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theadam","download_url":"https://codeload.github.com/theadam/react-inform/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theadam%2Freact-inform/sbom","scorecard":{"id":877685,"data":{"date":"2025-08-11","repo":{"name":"github.com/theadam/react-inform","commit":"884d5a15026aeff55fc645fd4c21b855b3bf3682"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"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":"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":"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":"Code-Review","score":0,"reason":"Found 1/22 approved changesets -- score normalized to 0","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":"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":"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":"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":"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":"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":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"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":"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":"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":"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":"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"}}]},"last_synced_at":"2025-08-24T06:41:49.568Z","repository_id":143905557,"created_at":"2025-08-24T06:41:49.568Z","updated_at":"2025-08-24T06:41:49.568Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30357614,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T21:41:54.280Z","status":"ssl_error","status_checked_at":"2026-03-10T21:40:59.357Z","response_time":106,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["decorators","forms","react","state","validation"],"created_at":"2025-12-16T08:05:53.146Z","updated_at":"2026-03-10T22:03:12.011Z","avatar_url":"https://github.com/theadam.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Circle CI](https://circleci.com/gh/theadam/react-inform.svg?style=shield)](https://circleci.com/gh/theadam/react-inform)\n# react-inform\n\nForms are not currently fun to work with in React.  There are a lot of form libraries out there, but a lot of them have issues making them a pain to work with.  These issues include:\n\n* You have to use provided input / form components rather than whatever components you want.\n* The provided inputs can have bugs and inconsistencies with the built-in components.\n* The forms cannot be controlled from outside of the library's components and user input.\n* You are forced into using refs to call methods on components.\n* Validations are not straightforward, and you cannot validate across fields (like having two different inputs that should have the same value).\n\n`react-inform` is a form library for React that avoids all of these issues.\n\n## Demos\n\n[Simple Form](http://theadam.github.io/react-inform/examples/basic-example/)\n\n[Simple Form With Animations Using mation](http://theadam.github.io/react-inform/examples/mation-example/)\n\n[Form with Async validation](http://theadam.github.io/react-inform/examples/async-example/)\n\n[Dynamic Fields](http://theadam.github.io/react-inform/examples/dynamic-fields/)\n\n[Integration with react-intl v2](https://jsfiddle.net/theadam/d0hypvtz/21/)\n\n## Installation\n\n`npm install --save react-inform`\n\n## Guide\n\nCreating a [simple validating form](https://jsfiddle.net/theadam/Lc3nkx7g/5/embedded/result%2Cjs%2Ccss%2Chtml%2Cresources/) is easy with `react-inform`.\n\n`react-inform` provides a simple decorator.  To that decorator you provide a list of fields in the form, and an optional validate function.  The `validate` function takes in an object where the keys are fieldnames and the values are the values of the fields, and it should return an object where the keys are fieldnames and the values are error strings.\n\nWe can configure a simple form that has the fields `username`, `password`, and `confirmPassword`.  This form will just validate that the `username` and `password` exist and that `confirmPassword` matches the password.  First just create the fields and validate function.  There is a helper function to aid in creating these validate functions, but for now, we will write one out by hand to get the hang of it.\n\n```jsx\nconst fields = ['username', 'password', 'confirmPassword'];\n\nconst validate = values =\u003e {\n  const { username, password, confirmPassword } = values;\n  const errors = {};\n\n  if (!username) errors.username = 'Username is required!';\n  if (!password) errors.password = 'Password is required!';\n  if (confirmPassword !== password) errors.confirmPassword = 'Passwords must match!';\n\n  return errors;\n}\n```\n\nNow that you have the fields and validate function, you can just use the form decorator:\n\n```jsx\nimport { form } from 'react-inform';\n\n@form({\n  fields,\n  validate\n})\nclass MyForm extends Component {\n...\n```\n\nOr you can use form as a function.\n\n```jsx\nclass MyForm extends Component {\n  ...\n}\n\nMyForm = form({\n  fields,\n  validate\n})(MyForm);\n```\n\nThe form function wraps your react component passing a `form` and `fields` property.  The `fields` property can be \"plugged into\" regular inputs in your render function.  The fields also willl have errors if your validate function returned any!\n\n```jsx\n\u003cinput type=\"text\" placeholder=\"Username\" {...username.props} /\u003e\n\u003cspan\u003e{username.error}\u003c/span\u003e\n\u003cinput type=\"password\" placeholder=\"Password\" {...password.props} /\u003e\n\u003cspan\u003e{password.error}\u003c/span\u003e\n\u003cinput type=\"password\" placeholder=\"Confirm Password\" {...confirmPassword.props} /\u003e\n\u003cspan\u003e{confirmPassword.error}\u003c/span\u003e\n```\n\nSimple!  Your form now validates, and keeps track of its state without all the boilerplate!  The complete working example can be seen [here!](https://jsfiddle.net/theadam/Lc3nkx7g/5/embedded/result%2Cjs%2Ccss%2Chtml%2Cresources/)\n\n## Api\n\n### form({ fields, [validate] })\n\nCreates a function used to wrap a react component.  Accepts an object that contains the keys `fields` and optionally `validate`.  `fields` is an array of fieldnames. `validate` is a function used to validate the field values.\n\nThe validate function should accept a map of fieldnames to values, and return a map of fieldnames to error strings (or a Promise that resolves to a map of fieldnames to error strings).\n\n#### Accepted properties\n\n| Property | Description |\n|---------|----------|\n| `value`| to control the data in the form from the parent of a form. |\n| `onChange`| to react to changes to the form in the parent of a form. |\n| `onValidate`| to react to changes in the validation state of the form.  The callback will be passed a boolean that is `true` when the form becomes valid. |\n| `fields`| Can be used instead of the `field` key in the decorator to control the list of fields in the form |\n| `validate`| Can be used instead of the `validate` key in the decorator to control the validate function |\n| `touched`| An object to control the `touched` state of each field.  The objects shape is `{ [fieldName]: [boolean], ... }` |\n| `onTouch`| An event fired anytime the touch state of any field in the form changes.  The handler receives the entire touched state of the form, with the same shape as the value for the `touched` prop |\n\n#### Properties passed to wrapped components\n\n##### form\n\nForm contains some utility functions to affect the wrapping form.\n\n| Function | Description |\n|----------|-------|\n| `isValid()`| returns true if all of the fields are valid |\n| `forceValidate()`| Causes all of the fields to get passed their error properties by setting every field's touched state to true.  Usually errors are only passed after the field has been \"touched\" (after onBlur). |\n| `values()`| returns the current value of all the form fields as a map. |\n| `onValues(values)`| forcefully sets all of the values in the form to the passed values. |\n| `touch(fields)`| sets the touched state to true for all of the fields named in the passed array arg |\n| `untouch(fields)`| sets the touched state to false for all of the fields named in the passed array arg |\n| `resetTouched()`| sets the touched state for all fields to false |\n\n##### fields\n\n`fields` is a map of the fields you passed in.  Each field has a value, onChange, and onBlur property so that they can be passed into regular input components and have them be controlled with `react-inform`.  If there is an error message on a field, the field will also have an error property.\n\nAll of the props that should be passed to your rendered input component (value, onChange, and onBlur) are also available using the `props` property.  For example:\n\n```jsx\nconst { fieldName } = this.props.fields;\n...\n\u003cinput type=\"text\" {...fieldName.props} /\u003e\n```\n\nThis keeps react from complaining about unknown props being passed to input components.  See [this link](https://gist.github.com/jimfb/d99e0678e9da715ccf6454961ef04d1b) for more details.\n\n### createValidate(ruleMap)\n\nA helper to create `validate` functions from maps of rules.  Rule functions can return Promises that resolve to booleans to support async validations.\n\nThis is an example rule map that ensures that username exists, password exists, and confirmPassword matches password.  Notice the keys to the rules are the error messages that will appear when the field is invalid.\n\n```jsx\nconst exists = v =\u003e Boolean(v);\n\nconst ruleMap = {\n  username: {\n    'Username must exist': exists\n  },\n  password: {\n    'Password must exist': exists\n  },\n  confirmPassword: {\n    'Passwords must match': (value, values) =\u003e value === values.password\n  }\n};\n```\n\n### from(rulesMap)\n\nCreates an object that can be passed directly to the form function / decorator using a ruleMap.  All fields must be represented in the ruleMap.  Fields without validations should have empty objects as their values in the rule map.\n\n`@form(from(rulesMap))`\n\n### ResetFormButton\n\nA Component which can be used inside a React Component wrapped with `react-inform`.  When clicked it will reset the form so that it contains no values.\n\nAccepts a `resetTouched` boolean prop.  When set to true, clicking the reset button will also reset all the fields' touched states.\n\n### DisabledFormSubmit\n\nA Component which can be used inside a React Component wrapped with `react-inform`.  It will remain disabled until all of the fields in the form are valid.  Once its enabled, clicking it will submit the form.\n\n### FeedbackFormSubmit\n\nA Component which can be used inside a React Component wrapped with `react-inform`.  When clicked, if the form has invalid fields, it will force those fields' errors to be passed as props.  If the form is valid, it will submit the form.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheadam%2Freact-inform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheadam%2Freact-inform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheadam%2Freact-inform/lists"}