Forms with minimum code and maximum performance
import React from 'react';
import { Form, useForm, useField } from 'exeform';
const validate = (values) => {
const errors = {};
if (!values.email) {
errors.email = 'This field is required';
}
if (!values.password) {
errors.password = 'This field is required';
}
return errors;
};
const TextField = ({ name, ...rest }) => {
const { field, meta } = useField(name);
const error = meta.touched ? meta.error : null;
return (
<div>
<input {...field} {...rest} />
{error ? <div>{error}</div> : null}
</div>
);
};
const Login = () => {
const form = useForm({
validate,
initialValues: {
email: '',
password: '',
},
});
const handleSubmit = (event) => {
event.preventDefault();
form.touchAllFields();
if (form.isValid) {
console.log(form.values);
form.reset();
}
};
return (
<Form form={form} onSubmit={handleSubmit}>
<TextField name="email" placeholder="email" />
<TextField name="password" placeholder="password" type="password" />
<button type="submit">Submit</button>
</Form>
);
};
