https://github.com/arifnextdev/zod-form-builder
A headless dynamic and reusable form builder for React
https://github.com/arifnextdev/zod-form-builder
npm-package npmjs react react-form-hook typescript zod
Last synced: 10 months ago
JSON representation
A headless dynamic and reusable form builder for React
- Host: GitHub
- URL: https://github.com/arifnextdev/zod-form-builder
- Owner: arifnextdev
- Created: 2025-01-31T21:44:06.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-20T18:40:04.000Z (12 months ago)
- Last Synced: 2025-03-27T13:49:21.047Z (11 months ago)
- Topics: npm-package, npmjs, react, react-form-hook, typescript, zod
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/zod-form-builder
- Size: 85 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# zod-form-builder
A dynamic form builder powered by **React Hook Form** and **Zod** for schema validation.
## 📦 Installation
```sh
npm install zod-form-builder
```
or
```sh
yarn add zod-form-builder
```
## 🚀 Usage Example
### **1. Import and Define Your Form Fields**
```tsx
"use client";
import { DynamicForms } from "zod-form-builder";
import { z } from "zod";
import { FieldConfig } from "zod-form-builder/dist/types";
// Define form values type
type LoginFormValues = {
email: string;
password: string;
role: "admin" | "user";
adminCode?: string;
};
// Define form fields
const loginFields: FieldConfig[] = [
{
type: "email",
name: "email",
label: "Email",
validation: z.string().email("Invalid email address"),
},
{
type: "password",
name: "password",
label: "Password",
validation: z
.string()
.min(8, "Password must be at least 8 characters long"),
},
{
type: "select",
name: "role",
label: "Role",
validation: z.enum(["admin", "user"]),
options: [
{ value: "admin", label: "Admin" },
{ value: "user", label: "User" },
],
},
{
type: "text",
name: "adminCode",
label: "Admin Code",
validation: z.string().optional(),
condition: (data) => data.role === "admin", // Only show if role is "admin"
},
];
// Handle form submission
const onSubmit = async (data: LoginFormValues) => {
console.log("Form submitted:", data);
};
const LoginForm = () => {
return (
defaultValues={{ email: "", password: "", role: "user", adminCode: "" }}
onSubmit={onSubmit}
fields={loginFields}
inputStyle="w-full px-3 py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2 "
buttonStyle="bg-blue-500 py-2 px-5 rounded-xl "
className="max-w-2xl mx-auto border p-5 mt-5 rounded-xl space-y-2 space-x-2"
/>
);
};
export default LoginForm;
```
## 📚 API Reference
### `` Props
| Prop | Type | Description |
| --------------- | ------------------- | ----------------------------------- |
| `defaultValues` | `DefaultValues` | Initial form values |
| `onSubmit` | `SubmitHandler` | Function called on form submission |
| `fields` | `FieldConfig[]` | Array of field configurations |
| `className` | `string` (optional) | Additional CSS classes for the form |
| `inputStyle` | `string` (optional) | Custom styles for input fields |
| `buttonStyle` | `string` (optional) | Custom styles for the submit button |
### **FieldConfig Properties**
| Property | Type | Description | | | | | |
| ------------ | ----------------------------------------------- | ----------------------------------------- | ---------- | -------- | ------- | ------------ | ---------- |
| `type` | \`"text" | "email" | "password" | "select" | "radio" | "checkbox"\` | Field type |
| `name` | `string` | Unique field name | | | | | |
| `label` | `string` | Field label | | | | | |
| `validation` | `ZodType` | Zod validation schema | | | | | |
| `options` | `{ value: string; label: string }[]` (optional) | Options for select, radio fields | | | | | |
| `condition` | `(data: T) => boolean` (optional) | Function to conditionally show/hide field | | | | | |
## 🔥 Features
- **Auto-validation** using `Zod`
- **Dynamic field rendering** with conditional logic
- **Minimal configuration** with `React Hook Form`
- **Custom styles** for inputs and buttons
## 🤝 Contributing
Feel free to submit issues and pull requests!
## 📜 License
MIT License.