{"id":26243475,"url":"https://github.com/stackedq/reformact","last_synced_at":"2025-12-28T14:22:52.878Z","repository":{"id":44174376,"uuid":"132045062","full_name":"stackedq/reformact","owner":"stackedq","description":"React form component using state.","archived":false,"fork":false,"pushed_at":"2022-12-02T02:52:08.000Z","size":733,"stargazers_count":1,"open_issues_count":10,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-25T15:21:03.890Z","etag":null,"topics":["react","react-form-validation","react-forms"],"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/stackedq.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":"2018-05-03T20:16:56.000Z","updated_at":"2022-02-02T21:16:44.000Z","dependencies_parsed_at":"2023-01-23T21:00:14.409Z","dependency_job_id":null,"html_url":"https://github.com/stackedq/reformact","commit_stats":null,"previous_names":["kiarashws/reformact"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackedq%2Freformact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackedq%2Freformact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackedq%2Freformact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackedq%2Freformact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stackedq","download_url":"https://codeload.github.com/stackedq/reformact/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243383199,"owners_count":20282097,"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":["react","react-form-validation","react-forms"],"created_at":"2025-03-13T10:20:32.500Z","updated_at":"2025-12-28T14:22:47.819Z","avatar_url":"https://github.com/stackedq.png","language":"JavaScript","readme":"# Reformact\nA react form component that uses state.\nbuilt with react for react with \u003c3\n\n\n##  Getting Started\nThese instructions will help you use this package,\nalright, let's get down to business.\n\n### installing\nRun this command in a terminal to install with npm:\n`npm i reformact -S`\n\n## Usage\nimport reformact in your application as follows:\n`import Form from 'reformact';`\n\nReformact gets an array of fields and render them based on them type; for example a minimal login form would be like:\n```\nclass LoginForm extends Component {\n  submit = (values) =\u003e {\n    const {username, password} = values //\n    this.props.apiLogin(username, password)\n  }\n  render() {\n    return (\u003cForm fields={[\n        {\n          type: \"text\", //  html input type\n          name: \"username\", //  unique name for input\n          placeholder: \"Jon doe\", // placeholder\n          required: true\n        }, {\n          type: \"password\",\n          name: \"password\",\n          placeholder: \"****\",\n          required: true\n        }]\n     } onSubmit={(values) =\u003e this.submit(values)} submitText='Login'/\u003e)\n  }\n}\n```\nthis will generate a form with two inputs named username and password and a submit button as shown below.\n\n![reformact](https://photos.app.goo.gl/hgUy8JGNobOpA4lx2)\n\nthis `Form` has an `onSubmit` attribute that gets fired when the form is submitted either with click or enter/return key and gets field values.\n\nthe `submitText` is the title of submit button.\n\n## Supported field types\nCurrently reformact supports `text`, `number`, `password`, `textarea`, `select`, `checkbox` and `radio` inputs, but will support lots of inputs soon.\n\n## Field attributes\n\nThe following table showing attributes.\nField type `*` means all types field.\n\n\n| Attributes | Field type | value | description |\n| - | - | - | - |\n| required | `*`  | boolean`(default=false)` | check if field has a value if set true. |\n| requiredPhrase | `*`  | string`(default=This field is required.)` | error shown when field is required and empty. |\n| name  | `*`  | string | a unique string in form, on submitting the form you can access a field value by values.`\u003cname\u003e` |\n| placeholder  | `*`  | string`(default=null)` | inputs placeholder. |\n| defaultValue | `*`  | any`(default=null)` | in case of editing forms pass current values via `defaultValue`. |\n| maxLength | `text`, `textarea`, `number` and `password` | number`(default=null)` | maximum value length. |\n| maxLengthErrorPhrase | `text`, `textarea`, `number` and `password` | string`(default=This field accepts \u003cmaxLength\u003e characters.)` | error shown when maxLength is crossed. |\n| multiSelect | `select`| boolean`(default=false)` | set true if select can have more than one values. |\n| selectHandle | `select` | component`(default=an ungly css-made triangle)`, example: `\u003ci className=\"ion-ios-arrow-down` (which needs ionicons) | this option is for changing the select box handle component. |\n| options | `select`, `radio` | array of objects with `label` and `value` | choices for select input and radio group. |\n| checkboxLabel| `checkbox` | string`(default:'')`| checkbox label. |\n| mustBeCheckedPhrase| `checkbox` | string`(default:'This field must be checked.')`| error shown when checkbox is required and not checked. |\n## License\n\nThis project is licensed under the MIT License.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackedq%2Freformact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstackedq%2Freformact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackedq%2Freformact/lists"}