diff --git a/packages/zod-forms/README.md b/packages/zod-forms/README.md index 23483c5..d546ebd 100644 --- a/packages/zod-forms/README.md +++ b/packages/zod-forms/README.md @@ -1 +1,46 @@ # zod-forms +[![npm version](https://shields.io/npm/v/zod-forms.svg)](https://www.npmjs.com/package/zod-forms) +[![npm downloads](https://shields.io/npm/dm/zod-forms.svg)](https://www.npmjs.com/package/zod-forms) +[![license](https://shields.io/npm/l/zod-forms.svg)](https://www.npmjs.com/package/zod-forms) + + +Zod Forms is a library for building forms in React using [Zod](https://zod.dev/) for validation. + +# Usage +To use `zod-forms` you need to create a form schema using Zod. The schema is a plain object with keys corresponding to the form fields and values corresponding to the validation rules. For example: +```typescript +import z from 'zod'; + +export const demoSchema = z.object({ + name: z + .string() + .nonempty('Name is required') + .min(2, {message: 'Must be 2 or more characters long'}), + age: z.number(), +}); + +``` +For more information on Zod validation rules see the [Zod documentation](https://zod.dev/?id=basic-usage). + +You can then use the `useZodForm` hook to create a form component. +Here is a simple example: +```typescript jsx +import React from 'react'; +import {useZodForm} from 'zod-forms'; +import {demoSchema} from './DemoSchema'; + +export function TestComponent() { + const {Form} = useZodForm(demoSchema); + + return ( +
+ + + + + + +
+ ); +} +``` diff --git a/packages/zod-forms/package.json b/packages/zod-forms/package.json index f8477bb..aa56b48 100644 --- a/packages/zod-forms/package.json +++ b/packages/zod-forms/package.json @@ -1,6 +1,6 @@ { "name": "zod-forms", - "version": "1.0.1", + "version": "1.0.2", "description": "Strongly-typed headless forms for react with zod schemas.", "main": "dist/index.js", "type": "module",