use-headless-form

A typesafe headless react hook for forms.

Installation

npm install use-headless-form

Demo

For a more advanced demo, click here or,

Usage

``tsx
const Form = () => {
const validation = useHeadlessForm({
username: {
defaultValue: "",
validators: [
(value) =>
(value.length < 2 || value.length > 50) &&
"Username must be between 2-50 characters.",
],
transformer: (value) => value.trim(),
},
password: {
defaultValue: "",
validators: [
(value) => value.length === 0 && Password cannot be empty.,
(value) =>
value.length < 8 && "Password needs to be atleast 8 characters long.",
(value) =>
value.length > 250 && "Password cannot be more than 250 characters.",
],
},
passwordAgain: {
defaultValue: "",
validators: [
(value, { password }) =>
value !== password.value && "Passwords do not match",
],
},
});

return (
onSubmit={() => {
const formData = {
username: validation.fields.username.value,
password: validation.fields.password.value,
};
console.log(formData); // or submit form
}}
>
{!validation.fields.username.satisfied && (

)}
type="text"
placeholder="username"
value={validation.fields.username.sourceValue}
onInput={(e) => validation.fields.username.set(e.currentTarget.value)}
/>
{!validation.fields.password.satisfied && (

)}
type="password"
placeholder="password"
value={validation.fields.password.sourceValue}
onInput={(e) => validation.fields.password.set(e.currentTarget.value)}
/>
{!validation.fields.passwordAgain.satisfied && (

)}
type="password"
placeholder="password"
value={validation.fields.passwordAgain.sourceValue}
onInput={(e) =>
validation.fields.passwordAgain.set(e.currentTarget.value)
}
/>
className="bg-white disabled:bg-neutral-500"
disabled={!validation.satisfied}
>
Submit


);
};

const FormErrors = ({ errors }: { errors: React.ReactNode[] }) => (



);
``