formite-core
Easy forms with React hooks
Installation
npm install formite-core
or
yarn add formite-core
It is recommended to use Formite with an adapter for your input elements like formite-html.
Usage without an adapter
import { useForm, useField } from "formite-core" const required = (v: unknown) => (v ? "" : "Required field"); const submitValues = (values: unknown) => { console.log(values);}; const SampleForm = () => { const { canSubmit, fields, formErrors, isDirty, submit } = useForm( { firstName: "Peter", lastName: "Smith" }, submitValues, { onValidate: handleValidateForm } ); const handleSubmit = useCallback( (ev: React.FormEvent<HTMLFormElement>) => { ev.preventDefault(); submit(); }, [submit] ); const firstNameField = useField(fields.firstName, required); const lastNameField = useField(fields.lastName, required); const handleFirstNameChange = useCallback( (ev: React.ChangeEvent<HTMLInputElement>) => firstNameField.onChange(ev.currentTarget.value), [firstNameField] ); const handleLastNameChange = useCallback( (ev: React.ChangeEvent<HTMLInputElement>) => lastNameField.onChange(ev.currentTarget.value), [lastNameField] ); return ( <form onSubmit={handleSubmit}> <input type="text" value={fields.firstName.value} onBlur={firstNameField.handleBlur} onChange={handleFirstNameChange} /> <span>{fields.firstName.error}</span> <input type="text" value={fields.lastName.value} onBlur={lastNameField.handleBlur} onChange={handleLastNameChange} /> <span>{fields.lastName.error}</span> <button type="submit" disabled={!canSubmit}>Submit</button> <p>{"Is dirty: " + isDirty}</p> <p>{"Form errors: " + formErrors.join(", ")}</p> </form> );};
See Storybook for more examples.