{"id":13422286,"url":"https://github.com/FionnCasey/react-hook-form-generator","last_synced_at":"2025-03-15T11:31:31.673Z","repository":{"id":51613020,"uuid":"250573200","full_name":"FionnCasey/react-hook-form-generator","owner":"FionnCasey","description":"Generate React forms from schema using Chakra UI and React Hook Form","archived":false,"fork":false,"pushed_at":"2021-01-13T15:27:54.000Z","size":3168,"stargazers_count":114,"open_issues_count":2,"forks_count":24,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-20T13:40:52.048Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/FionnCasey.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":"2020-03-27T15:37:17.000Z","updated_at":"2025-02-04T18:10:35.000Z","dependencies_parsed_at":"2022-08-21T23:40:22.415Z","dependency_job_id":null,"html_url":"https://github.com/FionnCasey/react-hook-form-generator","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FionnCasey%2Freact-hook-form-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FionnCasey%2Freact-hook-form-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FionnCasey%2Freact-hook-form-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FionnCasey%2Freact-hook-form-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FionnCasey","download_url":"https://codeload.github.com/FionnCasey/react-hook-form-generator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243724954,"owners_count":20337655,"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":[],"created_at":"2024-07-30T23:00:41.093Z","updated_at":"2025-03-15T11:31:30.925Z","avatar_url":"https://github.com/FionnCasey.png","language":"TypeScript","funding_links":[],"categories":["📚️ Libraries"],"sub_categories":[],"readme":"# React Hook Form Generator\n\nA [React](https://reactjs.org/) component to quickly and easily generate forms from object schema. Built with [React Hook Form](https://react-hook-form.com/) and [Chakra UI](https://chakra-ui.com/).\n\n## Live Demo\n\n[Storybook](https://fionncasey.github.io/react-hook-form-generator/)\n\n---\n\n## Installation\n\nThis package requires chakra-ui and react-hook-form as peer dependencies\n\n```shell\nnpm install react-hook-form-generator\nnpm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming\nnpm install react-hook-form\n```\n\n---\n\n## Usage\n\n```javascript\n// MyForm.js\nimport React from 'react';\nimport { Form } from 'react-hook-form-generator';\n\nconst schema = {\n  firstName: {\n    type: 'text',\n    label: 'First Name',\n    isRequired: true,\n  },\n  age: {\n    type: 'number',\n    label: 'Number',\n  },\n  contacts: {\n    type: 'array',\n    label: 'Contacts',\n    itemField: {\n      type: 'object',\n      properties: {\n        firstName: {\n          type: 'text',\n          label: 'First Name',\n        },\n        phoneNumber: {\n          type: 'text',\n          label: 'Phone Number',\n          htmlInputType: 'tel',\n        },\n      },\n    },\n  },\n};\n\nconst MyForm = () =\u003e {\n  const handleSubmit = values =\u003e {\n    // Do something\n  };\n\n  return \u003cForm title=\"My Form\" schema={schema} handleSubmit={handleSubmit} /\u003e;\n};\n```\n\nThis package uses Chakra UI for default styles so you need to wrap the form in a ThemeProvider\n\n```javascript\n// App.js\nimport React from 'react';\nimport { CSSReset, ThemeProvider } from '@chakra-ui/core';\nimport MyForm from './MyForm';\n\nconst App = () =\u003e (\n  \u003cThemeProvider\u003e\n    \u003cCSSReset /\u003e\n    \u003cMyForm /\u003e\n  \u003c/ThemeProvider\u003e\n);\n```\n\n---\n\n## Styling\n\nChakra UI [style props](https://chakra-ui.com/style-props) can be passed in as global styles for an a group of components (e.g. all text input fields) or on an individual field basis\n\n```javascript\n// Global style method\n\u003cForm\n  styles={{\n    textField: {\n      control: {\n        margin: 4,\n      },\n      input: {\n        focusBorderColor: 'teal.500',\n      },\n    },\n  }}\n/\u003e\n```\n\n```javascript\n// Individual fields method\n\u003cForm\n  schema={{\n    firstName: {\n      type: 'text',\n      style: {\n        control: {\n          margin: 4,\n        },\n        input: {\n          focusBorderColor: 'teal.500',\n        },\n      },\n    },\n  }}\n/\u003e\n```\n\nIndividual styles will be merged with global styles and take priority\n\n---\n\n## Validation\n\nReact Hook Form [schema validation](https://www.react-hook-form.com/advanced-usage#SchemaValidation) and other methods are forwarded through the `formOptions` property on the `Form` component\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFionnCasey%2Freact-hook-form-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFionnCasey%2Freact-hook-form-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFionnCasey%2Freact-hook-form-generator/lists"}