一覧へ戻る
7frank/zod-form(新しいタブで開きます)
主要言語: TypeScript
Generate forms from zod.js schemas
- star 数
- 26
- watcher 数
- 2
- fork 数
- 0
- issue 数
- 0
- 最終更新
- 2022/03/14
主要言語: TypeScript
Generate forms from zod.js schemas
Generate forms from zod.js schemas
Note: forms are hard - only a case study as of now
see it in action at https://7frank.github.io/zod-form/?path=/docs/welcome--a-form-with-two-sections
const firstSchema = z.object({ name: z.string().min(3), category: z.enum(['freelancer', 'student', 'company']), isActive: z.boolean(), numberOfParticipants: z.number().min(1), }); const firstSchemaTranslation = dummyFormTranslation( 'name', 'category', 'isActive', 'numberOfParticipants' ); export function AFormWithTwoSections() { const [data, setData] = useState(); return ( <> <ZodForm onSubmit={setData}> <ZodFormSection sectionName="section1" disabled={false} initialValues={{}} translation={firstSchemaTranslation} schema={firstSchema} factories={() => ZodFormFactories}, ></ZodFormSection> </ZodForm> <pre> data: {JSON.stringify(data, null, ' ')}</pre> </> ); }
override the default cell factories with your own implementation via
...
factories={() => ZodFormFactories},
...