Fully typed form state management system for React.
No magic, ref free. It's built for complicated form state management.
Support strong typed form state. Every form should have two kind of types:
i.e. before validation, a field named "bio" might be nullable ({bio: null | string}
) but it must not empty to submit ({bio: zod.string().nonempty()}
).
Also considers:
It's not a library for short coding or copy and paste template.
const schema = zod.object({
name: zod.string(),
age: zod
.string()
.transform((val) => Number(val))
.refine((val) => (Number.isNaN(val) ? 0 : val)),
marked: zod.literal(true),
});
type BeforeValidation = {
name: string;
age: string;
marked: boolean;
};
const {
components: {Field, Slicer},
handleSubmit,
} = createFormHook({name:'test', age: '42', marked: false} as BeforeValidation, schema);
function App() {
const submitHandler = handleSubmit((e) => (result) => {
if (result.error) {
return alert('Err!');
}
console.log(result.data); /*
{
name: 'test',
age: 42, <- age is typed "number" before validation because of definition
marked: true, <- have to be "true", not as boolean. it's power of zod
}
*/
});
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Field name="name">{(tool) => <input {...tool} />}</Field>
<Field name="age">{(tool) => <input {...tool} />}</Field>
<Field name="marked">{(tool) => <input {...tool} />}</Field>
<input type="submit" />
</form>
);
}
Generated using TypeDoc