Skip to content

Turn your Zod schemas into configurable field arrays for easy integration with HTML, React, Vue, and more.

License

Notifications You must be signed in to change notification settings

paxcode-it/zod-to-fields

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

49 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

License Coverage Downloads Version Status

๐Ÿ“š Table of Contents

  1. Introduction
  2. Features
  3. Installation
  4. Usage
  5. API Reference
  6. Examples
  7. Contributing
  8. License

๐Ÿ“‘ 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 type InputStringFieldOptions, which is narrowed to allow string types like text, password, etc. You can override these settings with any other property which is a subset of Partial<HTMLInputElement>.

  • z.enum() and z.nativeEnum() will generate field options of type InputEnumFieldOptions, 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.

About

Turn your Zod schemas into configurable field arrays for easy integration with HTML, React, Vue, and more.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages