{"id":19678177,"url":"https://github.com/ryanccollins/grommet-forms","last_synced_at":"2026-05-09T23:55:18.617Z","repository":{"id":93048937,"uuid":"81151018","full_name":"RyanCCollins/grommet-forms","owner":"RyanCCollins","description":"WIP Higher order components for constructing forms with Grommet","archived":false,"fork":false,"pushed_at":"2017-06-26T22:13:14.000Z","size":104,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-27T06:17:23.116Z","etag":null,"topics":["forms","grommet","higher-order-component","library","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RyanCCollins.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":"2017-02-07T01:13:07.000Z","updated_at":"2023-03-04T06:19:22.000Z","dependencies_parsed_at":"2023-03-30T06:05:01.903Z","dependency_job_id":null,"html_url":"https://github.com/RyanCCollins/grommet-forms","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RyanCCollins/grommet-forms","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanCCollins%2Fgrommet-forms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanCCollins%2Fgrommet-forms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanCCollins%2Fgrommet-forms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanCCollins%2Fgrommet-forms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RyanCCollins","download_url":"https://codeload.github.com/RyanCCollins/grommet-forms/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanCCollins%2Fgrommet-forms/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":285704831,"owners_count":27217839,"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-11-21T02:00:06.175Z","response_time":61,"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","grommet","higher-order-component","library","react"],"created_at":"2024-11-11T17:36:29.665Z","updated_at":"2025-11-21T23:03:02.028Z","avatar_url":"https://github.com/RyanCCollins.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"__NOTICE__:\nThis library is being actively developed.  Use with caution until a proper release has been published.\n\n# Grommet Forms\nCollection of higher order components for constructing forms with Grommet UX\n\n# Inspiration\nForms can often be the most time consuming part of your project.  Tons of state? :check: complex hierarchies of data? Yep, you get the point.  What we found when we were building our forms was that the best method was to render the form from a data structure stored in your state tree and to alter that state through redux.  \n\nHere's an example from a recent project of ours.\n\nThis is the object that sits in the state in your redux store.  It describes the form requirements declaratively.\n```\n\nexport const settingsForm = {\n  title: 'Settings',\n  id: 'settings-form',\n  compact: false,\n  fields: [\n    {\n      label: 'Allow Layout',\n      htmlFor: 'layout',\n      type: 'CheckBox',\n      error: null,\n      help: 'Should the layout be editable in the cms?',\n      field: {\n        checked: false,\n        onChange: null,\n        id: 'layout',\n        name: 'layout'\n      }\n    }\n  ]\n};\n```\n\n// In your connected component\n```\nimport GrommetForm from 'grommet-forms';\n\u003cGrommetForm form={this.props.settingsForm} /\u003e\n```\n\nWe love JSX, but sometimes you just end up writing too much of it.  The hope with this library is that you will save yourself some keystrokes.  Pass the form renderer a blob of data describing the hierarchy of your form / fields and get back a rendered form whose state you will manage using redux.\n\n## Field Types\nAll of the Grommet form components are supported.  When you create your field object, set the `type` property to one of the [Grommet Form Field types](https://github.com/RyanCCollins/grommet-forms/blob/master/src/FormFieldMap.js).\n\nEach object in your fields array must contain a `type` and a `value` property, along with FormField properties such as `help` and `label`.  The `fieldProps` object can contain any of the props that the field type supports, including functions.  Refer to the [Grommet Docs website](https://grommet.github.io/docs/components) for a list of supported props.  You can also reference the [source code](https://github.com/RyanCCollins/grommet-forms/blob/master/src/GrommetForm/types.js) to see the PropTypes (Flow Types) that we use internally.\n\nIf you want to use one of the built in form elements, i.e. `input` or `textarea` go right ahead!  Just pass in an element in JSX as the type, as shown below\n```\nexport const settingsForm = {\n  // ...\n  fields: [\n    {\n      label: 'Allow Layout',\n      htmlFor: 'layout',\n      type: \u003cinput /\u003e,\n      error: null,\n      help: 'Should the layout be editable in the cms?',\n      field: {\n        checked: false,\n        onChange: null,\n        id: 'layout',\n        name: 'layout'\n      }\n    }\n  ]\n};\n\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanccollins%2Fgrommet-forms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanccollins%2Fgrommet-forms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanccollins%2Fgrommet-forms/lists"}