@lucasftz/use-form
A powerful form library for error handling and managing input values without the need for controlled components, allowing you to write more concise and readable code.
Install
npm install --save @lucasftz/use-form
Quickstart
import React from 'react'
import { useForm } from '@lucasftz/use-form'
interface FormData {
username: string;
}
function Example() {
const { formHandler, errors } = useForm<FormData>({
schema: {
username: (value) => value.length > 3,
},
});
const handleSubmit = formHandler(({ e, formData }) => {});
return (
<form onSubmit={handleSubmit}>
<input name="username" />
<button>Submit</button>
</form>
);
}
API
interface ReturnType<T> {
errors: { [Key in keyof T]: boolean },
formHandler: ({ e, formData }: { e: SyntheticEvent<HTMLFormElement>, formData: T }) => void
}
interface Props<T> {
schema: { [Key in keyof T]: (value: T[Key]) => boolean }
}
function useForm<TFormData>({ schema }: Props<TFormData>): ReturnType<TFormData> {
// ...
}
The useForm hook returns a function with an object with two properties as a parameter:
formHandler
is a function that takes a callback function as its argument. This callback function will be called when the form is submitted and all validation checks are successful. The callback function receives an object with two properties: e, the form event, and formData, an object containing the form data.
errors
is an object with the keys of FormData and a boolean value of if that key has errored. This is revalidated on every submit.
schema
(required prop) is an object that defines the validation rules for the form fields. Each key corresponds to a field in the form, and the value is a validation function that receives the field value as its argument and returns a boolean indicating whether the value is valid.
License
MIT © lucasftz