{"id":21027506,"url":"https://github.com/letanure/react-form-generator","last_synced_at":"2026-05-06T18:31:41.812Z","repository":{"id":36984306,"uuid":"433947294","full_name":"letanure/react-form-generator","owner":"letanure","description":"Generate forms with a simple config","archived":false,"fork":false,"pushed_at":"2023-11-27T01:57:46.000Z","size":2077,"stargazers_count":1,"open_issues_count":20,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-20T14:48:37.775Z","etag":null,"topics":["form","form-validation","formgenerator","nextjs","react"],"latest_commit_sha":null,"homepage":"https://react-form-generator.vercel.app/","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/letanure.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":"2021-12-01T18:50:26.000Z","updated_at":"2023-03-08T04:37:24.000Z","dependencies_parsed_at":"2024-11-19T11:58:14.071Z","dependency_job_id":"d6aab6af-faa0-4b3f-90fc-046921e4e03c","html_url":"https://github.com/letanure/react-form-generator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letanure%2Freact-form-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letanure%2Freact-form-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letanure%2Freact-form-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letanure%2Freact-form-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/letanure","download_url":"https://codeload.github.com/letanure/react-form-generator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243467025,"owners_count":20295306,"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":["form","form-validation","formgenerator","nextjs","react"],"created_at":"2024-11-19T11:51:23.456Z","updated_at":"2026-05-06T18:31:41.779Z","avatar_url":"https://github.com/letanure.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![GitHub Workflow Status](https://img.shields.io/github/checks-status/letanure/react-form-generator/main)](https://github.com/letanure/react-form-generator/actions?query=event%3Apush+branch%3Amain)\n[![Code Climate maintainability](https://img.shields.io/codeclimate/maintainability/letanure/react-form-generator)](https://codeclimate.com/github/letanure/react-form-generator/maintainability)\n[![Codecov](https://img.shields.io/codecov/c/github/letanure/react-form-generator)](https://codecov.io/gh/letanure/react-form-generator)\n\n# React form generator\n\nwip\n\n\nCheck the [live version](https://react-form-generator.vercel.app/)\n\nTest all tem components  on [Storybook](https://main--61aa03e5bd6766003a35aefa.chromatic.com/)\n\nUI testing on [chromatic](https://www.chromatic.com/builds?appId=61aa03e5bd6766003a35aefa)\n\n\n\n\nThis is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n## Usage\n\n### TLDR\n\n```ts\nconst formConfig: FormConfig = {\n  title: 'He',\n  fields: [\n    {\n      label: 'Name',\n      name: 'name',\n      value: ''\n    },\n    {\n      label: 'Description',\n      name: 'field1',\n      type: 'text'\n      value: 'test'\n    },\n    {\n      label: 'Age',\n      name: 'age',\n      type: 'number'\n      value: ''\n    }\n  ]\n}\n\n\u003cForm\n    {...formConfig}\n    onChange={handleOnChange}\n    onSubmit={handleSubmit}\n  /\u003e`\n```\n\n#### Form config\n\nThe form config has text (title, description, button) and a array of field configs\n\n```ts\ntype FormConfig = {\n  fields: FieldConfig[]\n  title?: string\n  submitText?: string\n  description?: string\n}\n```\n\n#### Field config\n\nThe field config should use the default  HTML `\u003cinput /\u003e` and `\u003ctextarea /\u003e` props\n\n\n```ts\ntype FieldConfig = {\n  name: string\n  value: FieldData['value']\n  label?: string\n  type?: FieldTypes\n  placeholder?: string\n  validate?: ValidationSchema[]\n  disabled: boolean\n  readonly: boolean\n  // textarea\n  rows?: number\n  // select\n  options?: FieldOption[]\n  maxErrors?: number\n}\n\ntype FieldOption = {\n  value: FieldData['value']\n  label: string\n}\n```\n\n#### Field types\n\nby default, the type is `text`, but you can choose one of the following options\n\n```\n| 'color'\n| 'datetime-local'\n| 'datetime'\n| 'date'\n| 'email'\n| 'hidden'\n| 'month'\n| 'number'\n| 'password'\n| 'search'\n| 'tel'\n| 'text'\n| 'time'\n| 'url'\n| 'textarea'\n| 'select'\n| 'radioGroup'\n```\n\n#### Validation methods\n\nThe validation uses [fastest-validator](https://github.com/icebob/fastest-validator) as root element schema.\n\nto add validation to a field, add:\n\n```ts\n{\n  label: 'Age',\n  name: 'age',\n  type: 'number'\n  value: '',\n  validation: [\n    { type: 'number',  min: 18, max: 69 }\n  ]\n}\n```\n\n\n##### ValidationSchema\n\nThe available built in methods:\n\n```js\n\n// No validation\n{ type: 'any' }\n\n// URL\n{ type: 'url' }\n\n// email\n{ type: 'email' }\n\n// date, convert from string with convert\n{ type: 'date', convert?: true },\n\n// enum\n{ type: 'enum', values: ['AA', 'BBB'] }\n\n// equal, strict with type check\n{ type: 'equal', value: 'CCC', strict?: true }\n\n// number\n{ type: 'number',\n    min?: 5\n    max?: 10\n    equal?: 'DD'\n    notEqual?: 'EE'\n    integer?: true\n    positive?: true\n    negative?: true\n    convert?: true\n}\n\n// Strings\n{ type: 'string',\n  empty?: false,\n  min?: true,\n  max?: true,\n  length?: true,\n  pattern?: /^foo/,\n  contains?: 'bar',\n  enum?: ['foo', 'bar'],\n  alpha?: true,\n  numeric?: true,\n  alphanum?: true,\n  alphadash?: true,\n  hex?: true,\n  singleLine?: true,\n  base64?: true\n}\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fletanure%2Freact-form-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fletanure%2Freact-form-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fletanure%2Freact-form-generator/lists"}