@codemask-labs/forms

forms

Basic usage

const formSchema = {
    name: z.string().min(3).default('john'),
    email: z.string().email().default('')
}

const App = () => {
    const { form, submit } = useForm({
        fields: formSchema,
        onSuccess: () => {},
        onError: () => {}
    })

    return (
        <form onSubmit={event => {
            event.preventDefault()
            submit()
        }}>
            <Input field={form.name} />
            <Input field={form.email} />
            <button>
                Submit
            </button>
        </form>
    )
}

const Input: React.FunctionComponent<{ field: ReactiveFormField<string> }> = ({ field: useField }) => {
    const { value, onChange, reset, error } = useField()

    return (
        <div>
            <input value={value} onChange={event => onChange(event.target.value)} />
            <span>{error}</span>
            <button type='button' onClick={reset}>Reset</button>
        </div>
    )
}