Zod To Fields
Automate your form field generation with type safety. Zod To Fields is a utility that effortlessly creates form fields from Zod schemas, ensuring TypeScript type safety and developer-friendly code completion.
📚 Table of Contents
📑 Introduction
This library helps you convert Zod schemas to form fields, reducing boilerplate code and enforcing type safety.
⭐ Features
🛡️ Strong Type Safety with Zod and TypeScript
Eradicate runtime errors and ensure robust code with our TypeScript-based utility that flawlessly integrates with Zod schemas. Enjoy the benefits of type inference and static type checking in your form fields.
🧠 Intelligent Code Completion and Intellisense
Developer-friendly is our middle name! With strong typing, your IDE will become your best friend, providing invaluable code completion and Intellisense suggestions, making your development process faster and error-free.
🎓 Example for Code Completion
With a Zod schema like this:
const schema = z.object({
name: z.string(),
age: z.number(),
isActive: z.boolean(),
})
The function createOptions
will offer real-time attribute suggestions based on your Zod schema types.
const options = createOptions(schema)({
// IDE suggestions here
})
💻 Installation
Ensure you have the power of Zod To Fields in your project by installing it via your preferred package manager:
# With npm
npm install zod-to-fields --save
# With Yarn
yarn add zod-to-fields
# With Pnpm
pnpm install zod-to-fields
🔔 Note: This package is optimized for ECMAScript modules (ESM). Ensure your environment supports ESM imports.
🚀 Usage
🌱 Basic Example
Generate form fields effortlessly:
import { z } from 'zod'
import { ztf } from 'zod-to-fields'
const schema = z.object({
name: z.string(),
age: z.number(),
isActive: z.boolean(),
})
const options = ztf.createOptions(schema)({
name: { label: 'Full Name' },
age: { label: 'Your Age', type: 'number' },
isActive: { label: 'Active Status', type: 'checkbox' },
})
const formFields = ztf.generateFields(schema, options)
🧙 Advanced Usage
Nested Schemas
For nested schemas, you can define a Zod schema as follows:
const schema = z.object({
name: z.string(),
lastName: z.string(),
isAdult: z.boolean(),
phoneNumber: z.string(),
currency: z.enum(['USD', 'EUR', 'GBP']),
colors: z.nativeEnum(Colors),
email: z.string(),
address: z.object({
location: z.object({
longitude: z.number(),
latitude: z.number(),
}),
street: z.string(),
city: z.string(),
zip: z.string(),
}),
})
Enums and Native Enums
The library also supports Zod's enum and nativeEnum types, allowing you to use either string-based or native TypeScript enums as options in your form fields.
📖 API Reference
createOptions
/**
* Creates and manages field options based on a Zod schema.
* @param initialSchema The initial Zod schema.
* @returns An object containing methods for manipulating field options.
*/
Usage
const options = createOptions(schema)
Parameters
-
initialSchema
: Your Zod schema object.
Returns
-
withFieldOptions
: Method for setting field options. -
build
: Method for building the final options object.
withFieldOptions
/**
* Merges the provided field options with existing options.
* @param fieldOptions The field options to merge.
* @returns An object containing methods for further manipulation or to build the options. Chainable.
*/
Usage
const { withFieldOptions, build } = createOptions(schema)
withFieldOptions({
/* field options */
}).build()
Parameters
-
fieldOptions
: Object containing the attributes you want to customize.
Returns
- Chainable methods for further manipulation.
Type Behavior
-
z.string()
will generate field options of typeInputStringFieldOptions
, which is narrowed to allow string types liketext
,password
, etc. You can override these settings with any other property which is a subset ofPartial<HTMLInputElement>
. -
z.enum()
andz.nativeEnum()
will generate field options of typeInputEnumFieldOptions
, allowing you to specify options either as a select dropdown or as radio buttons.
build
/**
* Builds the final options object.
* @returns The built options object.
*/
Usage
const { build } = createOptions(schema).withFieldOptions({
/* field options */
})
const finalOptions = build()
📂 Examples
Refer to the /examples
folder for real-world scenarios and advanced usage.
🤝 Contributing
We love community contributions! For guidelines on how to contribute, please see CONTRIBUTING.md.
📜 License
This project is under the MIT License. See the LICENSE file for more details.