{"id":24892729,"url":"https://github.com/arifnextdev/zod-form-builder","last_synced_at":"2026-02-21T18:04:15.867Z","repository":{"id":275214681,"uuid":"925432545","full_name":"arifnextdev/zod-form-builder","owner":"arifnextdev","description":"A headless dynamic and reusable form builder for React","archived":false,"fork":false,"pushed_at":"2025-02-20T18:40:04.000Z","size":87,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-23T18:08:59.331Z","etag":null,"topics":["npm-package","npmjs","react","react-form-hook","typescript","zod"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/zod-form-builder","language":"TypeScript","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/arifnextdev.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,"zenodo":null}},"created_at":"2025-01-31T21:44:06.000Z","updated_at":"2025-02-20T18:40:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"d395d155-f474-443f-8c69-2add808fb564","html_url":"https://github.com/arifnextdev/zod-form-builder","commit_stats":null,"previous_names":["arifnextdev/zod-form-builder"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/arifnextdev/zod-form-builder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arifnextdev%2Fzod-form-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arifnextdev%2Fzod-form-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arifnextdev%2Fzod-form-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arifnextdev%2Fzod-form-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arifnextdev","download_url":"https://codeload.github.com/arifnextdev/zod-form-builder/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arifnextdev%2Fzod-form-builder/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29689644,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T15:51:39.154Z","status":"ssl_error","status_checked_at":"2026-02-21T15:49:03.425Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["npm-package","npmjs","react","react-form-hook","typescript","zod"],"created_at":"2025-02-01T18:16:28.973Z","updated_at":"2026-02-21T18:04:15.834Z","avatar_url":"https://github.com/arifnextdev.png","language":"TypeScript","readme":"# zod-form-builder\n\nA dynamic form builder powered by **React Hook Form** and **Zod** for schema validation.\n\n## 📦 Installation\n\n```sh\nnpm install zod-form-builder\n```\n\nor\n\n```sh\nyarn add zod-form-builder\n```\n\n## 🚀 Usage Example\n\n### **1. Import and Define Your Form Fields**\n\n```tsx\n\"use client\";\nimport { DynamicForms } from \"zod-form-builder\";\nimport { z } from \"zod\";\nimport { FieldConfig } from \"zod-form-builder/dist/types\";\n\n// Define form values type\ntype LoginFormValues = {\n  email: string;\n  password: string;\n  role: \"admin\" | \"user\";\n  adminCode?: string;\n};\n\n// Define form fields\nconst loginFields: FieldConfig\u003cLoginFormValues\u003e[] = [\n  {\n    type: \"email\",\n    name: \"email\",\n    label: \"Email\",\n    validation: z.string().email(\"Invalid email address\"),\n  },\n  {\n    type: \"password\",\n    name: \"password\",\n    label: \"Password\",\n    validation: z\n      .string()\n      .min(8, \"Password must be at least 8 characters long\"),\n  },\n  {\n    type: \"select\",\n    name: \"role\",\n    label: \"Role\",\n    validation: z.enum([\"admin\", \"user\"]),\n    options: [\n      { value: \"admin\", label: \"Admin\" },\n      { value: \"user\", label: \"User\" },\n    ],\n  },\n  {\n    type: \"text\",\n    name: \"adminCode\",\n    label: \"Admin Code\",\n    validation: z.string().optional(),\n    condition: (data) =\u003e data.role === \"admin\", // Only show if role is \"admin\"\n  },\n];\n\n// Handle form submission\nconst onSubmit = async (data: LoginFormValues) =\u003e {\n  console.log(\"Form submitted:\", data);\n};\n\nconst LoginForm = () =\u003e {\n  return (\n    \u003cDynamicForms\u003cLoginFormValues\u003e\n      defaultValues={{ email: \"\", password: \"\", role: \"user\", adminCode: \"\" }}\n      onSubmit={onSubmit}\n      fields={loginFields}\n      inputStyle=\"w-full px-3 py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2 \"\n      buttonStyle=\"bg-blue-500 py-2 px-5 rounded-xl \"\n      className=\"max-w-2xl mx-auto border p-5 mt-5 rounded-xl space-y-2 space-x-2\"\n    /\u003e\n  );\n};\n\nexport default LoginForm;\n```\n\n## 📚 API Reference\n\n### `\u003cDynamicForms /\u003e` Props\n\n| Prop            | Type                | Description                         |\n| --------------- | ------------------- | ----------------------------------- |\n| `defaultValues` | `DefaultValues\u003cT\u003e`  | Initial form values                 |\n| `onSubmit`      | `SubmitHandler\u003cT\u003e`  | Function called on form submission  |\n| `fields`        | `FieldConfig\u003cT\u003e[]`  | Array of field configurations       |\n| `className`     | `string` (optional) | Additional CSS classes for the form |\n| `inputStyle`    | `string` (optional) | Custom styles for input fields      |\n| `buttonStyle`   | `string` (optional) | Custom styles for the submit button |\n\n### **FieldConfig Properties**\n\n| Property     | Type                                            | Description                               |            |          |         |              |            |\n| ------------ | ----------------------------------------------- | ----------------------------------------- | ---------- | -------- | ------- | ------------ | ---------- |\n| `type`       | \\`\"text\"                                        | \"email\"                                   | \"password\" | \"select\" | \"radio\" | \"checkbox\"\\` | Field type |\n| `name`       | `string`                                        | Unique field name                         |            |          |         |              |            |\n| `label`      | `string`                                        | Field label                               |            |          |         |              |            |\n| `validation` | `ZodType\u003cany\u003e`                                  | Zod validation schema                     |            |          |         |              |            |\n| `options`    | `{ value: string; label: string }[]` (optional) | Options for select, radio fields          |            |          |         |              |            |\n| `condition`  | `(data: T) =\u003e boolean` (optional)               | Function to conditionally show/hide field |            |          |         |              |            |\n\n## 🔥 Features\n\n- **Auto-validation** using `Zod`\n- **Dynamic field rendering** with conditional logic\n- **Minimal configuration** with `React Hook Form`\n- **Custom styles** for inputs and buttons\n\n## 🤝 Contributing\n\nFeel free to submit issues and pull requests!\n\n## 📜 License\n\nMIT License.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farifnextdev%2Fzod-form-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farifnextdev%2Fzod-form-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farifnextdev%2Fzod-form-builder/lists"}