{"id":16515614,"url":"https://github.com/insin/react-auto-form","last_synced_at":"2025-09-21T00:31:33.583Z","repository":{"id":27091778,"uuid":"30558867","full_name":"insin/react-auto-form","owner":"insin","description":"Simplifies getting user input from forms via onChange and onSubmit events, using DOM forms APIs","archived":false,"fork":false,"pushed_at":"2020-05-16T08:51:43.000Z","size":53,"stargazers_count":116,"open_issues_count":5,"forks_count":12,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-09-04T10:45:30.309Z","etag":null,"topics":["forms","react","react-component"],"latest_commit_sha":null,"homepage":"https://insin.github.io/react-auto-form/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"alibaba/dubbo","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/insin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.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":"2015-02-09T21:15:43.000Z","updated_at":"2023-09-10T11:08:22.000Z","dependencies_parsed_at":"2022-09-02T04:50:55.532Z","dependency_job_id":null,"html_url":"https://github.com/insin/react-auto-form","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/insin/react-auto-form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-auto-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-auto-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-auto-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-auto-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/insin","download_url":"https://codeload.github.com/insin/react-auto-form/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-auto-form/sbom","scorecard":{"id":489724,"data":{"date":"2025-08-11","repo":{"name":"github.com/insin/react-auto-form","commit":"6fa4d22910b99ef45324b8dae51286a4353658ed"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"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":"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":"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":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"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":"Code-Review","score":0,"reason":"Found 0/30 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":"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":"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":"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":"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":"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"}}]},"last_synced_at":"2025-08-19T18:45:43.153Z","repository_id":27091778,"created_at":"2025-08-19T18:45:43.158Z","updated_at":"2025-08-19T18:45:43.158Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274262145,"owners_count":25251960,"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-09-09T02:00:10.223Z","response_time":80,"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":["forms","react","react-component"],"created_at":"2024-10-11T16:17:38.144Z","updated_at":"2025-09-21T00:31:33.348Z","avatar_url":"https://github.com/insin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## React `\u003cAutoForm\u003e`\n\n[![Travis][build-badge]][build]\n[![Codecov][coverage-badge]][coverage]\n[![npm package][npm-badge]][npm]\n\nAn `\u003cAutoForm\u003e` [React](https://reactjs.org) component, which simplifies getting data from its contained form inputs via their `onChange` events and the form's `onSubmit` event, optionally trimming text input.\n\n## [Live Demo](https://insin.github.io/react-auto-form/)\n\n## Install\n\n```\nnpm install react-auto-form\n```\n\n```javascript\nimport AutoForm from 'react-auto-form'\n// or\nvar AutoForm = require('react-auto-form')\n```\n\nBrowser bundles are available, which export a global `AutoForm` variable and expect to find a global ``React`` variable to work with.\n\n* [react-auto-form.js](https://unpkg.com/react-auto-form/umd/react-auto-form.js) (development version)\n* [react-auto-form.min.js](https://unpkg.com/react-auto-form/umd/react-auto-form.min.js) (compressed production version)\n\n## Usage\n\nThe following React component skeleton shows usage of `AutoForm` to handle getting input `onChange` and `onSubmit`, plus the argument signatures it expects event callbacks to have:\n\n```javascript\nclass ExampleForm extends React.Component {\n  _onChange = (event, name, data, change) =\u003e {\n    // ...\n  }\n\n  _onSubmit = (event, data) =\u003e {\n    // ...\n  }\n\n  render() {\n    return \u003cAutoForm onChange={this._onChange} onSubmit={this._onSubmit} trimOnSubmit\u003e\n      {/* ...form inputs... */}\n    \u003c/AutoForm\u003e\n  }\n}\n```\n\n## API\n\n### `AutoForm` component\n\nThis component handles bubbling `onChange` events for convenient handling of input data changes as they happen and extraction of submittable form data.\n\nIt saves you from having to manually configure an `onChange` handler for each individual form input and from having to manually extract data from form inputs.\n\nIn order to do this, it expects form inputs contained within it to have `name` attributes set up as you would for any form which will be used for regular form submission.\n\nMultiple inputs with the same `name` are supported - their extracted data will always be contained in an `Array` when they have some submittable data, with the exception of a group of radio buttons all having the same name, which will return the selected value only.\n\nThe data extracted from form inputs and the form as a whole is in line with data which would be submitted for the form's current state via a regular form submission - this makes it suitable for use in isomorphic apps which configure a form for regular submission and progressively enhance form-handling when JavaScript runs on the client.\n\nWhere available, data extracted from file inputs will be native [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) objects.\n\n#### `AutoForm` props\n\nYou can pass all the usual form attributes to `AutoForm` (`action`, `method`, `encType`, `noValidate` etc.), and they will be passed on to the `\u003cform\u003e` it renders for you by default.\n\nThe following props are treated specially:\n\n##### `component`\n\nThe component which will be rendered by AutoForm - defaults to `'form'`.\n\n##### `onChange: Function(event, name, data, change)`\n\nIf this prop is given, AutoForm will configure the form with an `onChange` handler which will handle `onChange` events from any inputs contained within the form, extract data for the form element which triggered the event and call the given `onChange` function with the following arguments:\n\n1. `event: `[`SyntheticEvent`](https://reactjs.org/docs/events.html#syntheticevent) - the event being handled.\n\n2. `name: string` - the name of the form element which was the target of the event.\n\n3. `data: null|boolean|string|string[]|File|File[]` - submittable data for the form element which changed.\n\n   This value will be as documented for the get-form-data module's [`getFieldData()` return value](https://github.com/insin/get-form-data#getfielddataform-htmlformelement-fieldname-string-options-object).\n\n   The TL;DR for that is:\n\n   * `data` for an empty text input will be an empty String (`''`).\n   * `data` for any other type of input which doesn't have a submittable value will be `null`.\n   * `data` for a single checkbox input which is checked and doesn't have a `value` will be `true`.\n   * `data` for an `\u003cinput type=\"file\"\u003e` will be a [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) if the browser supports the File API. If the input has a `multiple` attribute, `data` will be a list of Files when any are selected.\n\n4. `change: Object.\u003cstring,null|boolean|string|string[]|File|File[]\u003e` - an object containing `{[name]: data}`, for convenience if you're using [controlled form components](https://reactjs.org/docs/forms.html#controlled-components) and need to call `setState()` on every change.\n\n##### `onSubmit: Function(event, data)`\n\nIf this prop is given, `AutoForm` will configure the form with an `onSubmit` handler which will handle the form's `onSubmit` event, extract submittable data for the form's elements and call the given `onChange` function with the following arguments:\n\n1. `event: `[`SyntheticEvent`](https://reactjs.org/docs/events.html#syntheticevent) - the event being handled.\n\n2. `data: Object.\u003cstring,null|boolean|string|string[]|File|File[]\u003e` - submittable data for the form.\n\n   The properties of this object will be as documented for the [get-form-data](https://github.com/insin/get-form-data#get-form-data) module's [`getFormData()` return value](https://github.com/insin/get-form-data#return-type-objectstring-stringarraystring).\n\n##### `trimOnSubmit: boolean` (default: `false`)\n\nIf `true`, user input from text inputs will be trimmed of leading and trailing whitespace only when it is being extracted after an `onSubmit` event.\n\n##### `trim: boolean` (default: `false`)\n\nIf `true`, user input from text inputs will always be trimmed of leading and trailing whitespace when it is being extracted.\n\nWhen `true`, this prop takes precedence over `trimOnSubmit`.\n\n**Note:** It's *not* advisable to use the `trim` prop in conjunction with `onChange` and controlled input components, as the user will be completely disallowed from entering a leading or trailing space, so they won't be able to enter information containing spaces without copying and pasting it. Just use `trimOnSubmit` instead in this case.\n\n## MIT Licensed\n\n[build-badge]: https://img.shields.io/travis/insin/react-auto-form/master.svg\n[build]: https://travis-ci.org/insin/react-auto-form\n\n[coverage-badge]: https://img.shields.io/codecov/c/github/insin/react-auto-form.svg\n[coverage]: https://codecov.io/github/insin/react-auto-form\n\n[npm-badge]: https://img.shields.io/npm/v/react-auto-form.svg\n[npm]: https://www.npmjs.org/package/react-auto-form\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Freact-auto-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finsin%2Freact-auto-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Freact-auto-form/lists"}