@odyssoft/zod-mui-forms

Odyssoft zod mui forms package, built using Mui & storybook Create forms with automatic validation with ease, for use on both client and server components.

Installation

npm i @odyssoft/zod-mui-forms

Basic Usage

Define a schema

Schema creation using zod is very straight forward as shown in the below example;

const mySchema = z.object({
  name: z.string().min(3),
  email: z.string().email(),
  age: z.number().optional(),
})

Of course there are many more complex use cases which you can find more information on by visiting the official zod documentation

Create a server action

'use server'

import { Action } from '@odyssoft/zod-mui-forms'

import { mySchema } from './mySchema'

export const myAction: Action = (_, form) => {
  const { success, data, error } = mySchema.safeParse({
    name: form.get('name'),
    email: form.get('email'),
    birthday: form.get('birthday'),
  })
  if (!success) return { errors: error.flatten(), data, success }
  //  Add your server logic here

  return {}
}

Create the react form

import { Form, Input, Submit } from '@odyssoft/zod-mui-forms'
import { z } from 'zod'

import { myAction } from './actions'
import { mySchema } from './schema'

export const MyForm = () => {
  return (
    <Form action={myAction} schema={mySchema}>
      <Input label='Name' name='name' />
      <Input label='Email' name='email' />
      <Input label='Birthday' name='birthday' type='date' />
      <Submit>Submit</Submit>
    </Form>
  )
}