{"id":28347655,"url":"https://github.com/stjepangolemac/form-example","last_synced_at":"2025-08-22T19:13:36.335Z","repository":{"id":264792469,"uuid":"146337958","full_name":"stjepangolemac/form-example","owner":"stjepangolemac","description":"An example app to showcase building custom helpers for form management in React.","archived":false,"fork":false,"pushed_at":"2018-08-30T13:31:52.000Z","size":207,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-17T04:39:07.420Z","etag":null,"topics":["context","example","final","form","react","redux"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stjepangolemac.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2018-08-27T18:30:16.000Z","updated_at":"2018-12-07T10:06:55.000Z","dependencies_parsed_at":"2024-11-26T09:57:29.889Z","dependency_job_id":"2266f502-34ad-4e3e-a3af-5359874f16e8","html_url":"https://github.com/stjepangolemac/form-example","commit_stats":null,"previous_names":["stjepangolemac/form-example"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stjepangolemac/form-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stjepangolemac%2Fform-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stjepangolemac%2Fform-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stjepangolemac%2Fform-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stjepangolemac%2Fform-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stjepangolemac","download_url":"https://codeload.github.com/stjepangolemac/form-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stjepangolemac%2Fform-example/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261255450,"owners_count":23131472,"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":["context","example","final","form","react","redux"],"created_at":"2025-05-27T17:10:48.691Z","updated_at":"2025-08-22T19:13:36.322Z","avatar_url":"https://github.com/stjepangolemac.png","language":"JavaScript","readme":"# form-example\n\nThis is an example that shows how to implement React helpers to build and maintain forms.\n\nThe API is very similar to `redux-form` and `final-form` but I did no source code reading prior to developing this.\n\n## Live demo\nThe demo is available on this [link](https://build-btbbnfwqty.now.sh). \n\nSubmit errors can be caused by submitting 'fail please' in the `role` field or by submitting 'foo@bar.baz' in the `email` field.\n## Scripts\n- `yarn start` - start development server\n- `yarn build` - build the bundle\n- `yarn test` - run tests\n\n## API\n### Form\nAccepts `onSubmit` and `pages` props. Pages are used to build wizard forms. Render function passes `submitting`, `submitFailed`, `submitFormError` props to the children.\n```\n  \u003cForm onSubmit={console.log} pages={[\"foo\", \"bar\"]}\u003e\n    {({ submitting, ... }) =\u003e (\n      ...\n    )}\n  \u003c/Form\u003e\n```\n\n### Field\nAccepts `name`, `component`, `validator`, and `type` props.\n\nPassed component should know how to manage the props Field passes to it and they are structured like this:\n``` js\n{\n  input: {\n    id,\n    value,\n    onChange,\n    onBlur\n  },\n  meta: {\n    pristine,\n    error,\n    submitError\n  }\n}\n```\n\nThe `Field` is used like this:\n\n```\n\u003cField\n  name=\"firstname\"\n  component={TextInput}\n  validator={notEmpty}\n/\u003e\n```\n\n### FormPage\nThe `FormPage` is used to build multi-part (wizard) forms. It only accepts a `page` prop.\n\nIt will automatically render `Previous` and `Next` buttons. If there are errors on the page the user cannot go to the next page.\n\nIt is used like this:\n```\n\u003cForm onSubmit={console.log} pages={[\"first\", \"second\"]}\u003e\n  {() =\u003e (\n    \u003cReact.Fragment\u003e\n      \u003cFormPage page=\"first\"\u003e\n        \u003cField\n          ...\n        /\u003e\n      \u003c/FormPage\u003e\n      \u003cFormPage page=\"second\"\u003e\n        \u003cField\n          ...\n        /\u003e\n        \u003cbutton\u003eSubmit me\u003c/button\u003e\n      \u003c/FormPage\u003e\n    \u003c/React.Fragment\u003e\n  )}\n\u003c/Form\u003e\n\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstjepangolemac%2Fform-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstjepangolemac%2Fform-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstjepangolemac%2Fform-example/lists"}