Reactive form management and input field validation hook
npm install reactjs-use-form
#### The most lightweight React form management library with TypeScript support
> Create a form model, flag input fields as required or add a value validation function with custom error messages. useForm will validate the inputs as the user types, when there are no errors the form gets enabled for submission. On form submission, it executes a callback function the user provides.
##### Requirements:
- 📋 Form model with optional validation function.
- ⚙️ Function to run after form validation and submission.
- ⚛️ React functional component with a form.
``bashnpm
npm install reactjs-use-form
- 🧪 Tested using @testing-library/react.
- 🏗️ Built with Vite in library mode.
- ⚡ Modern TypeScript 5.7+ with strict type checking.
Usage
##### Steps:
1. create a form model:
tsx
import type { FormModelType } from 'reactjs-use-form';export const formModel: FormModelType = {
currentPassphrase: {
value: '',
required: true,
},
newPassphrase: {
value: '',
required: true,
validator: (newPassphrase, values) => {
if (newPassphrase === values?.currentPassphrase) {
return 'New password must be different from current password';
} else if (newPassphrase.length <= 5) {
return 'Password must be at least 6 characters long';
} else if (newPassphrase !== values?.verifyPassphrase) {
return 'Passwords do not match';
} else return '';
},
},
verifyPassphrase: {
value: '',
required: true,
validator: (verifyPassphrase, values) => {
return verifyPassphrase !== values?.newPassphrase ? 'Passwords do not match' : '';
},
},
};
`2. prepare a submit callback function, for example:
.3. use the form model with the callback function in useForm hook in a functional react component:
Plain JSX code example
`tsx
import React from 'react';
import { useForm } from 'reactjs-use-form';
import type { ValuesType } from 'reactjs-use-form';
import { formModel } from './formModel';const ChangePassphraseComponent = () => {
const {
values,
errors,
handleOnChange,
handleOnSubmit,
isDisabled,
isSubmitted,
isSubmitting,
isDirty,
resetForm,
resetField
} = useForm(formModel, handleSubmit);
const { currentPassphrase, newPassphrase, verifyPassphrase }: ValuesType = values;
function handleSubmit() {
if (isDirty) formSubmitCallback();
}
return (
);
};
`Options
useForm takes two params:
and formSubmitCallback and returns the rest.`tsx
const {
values,
errors,
handleOnChange,
handleOnSubmit,
isDisabled,
isSubmitted,
isSubmitting,
isDirty,
resetForm,
resetField
} = useForm(formModel, formSubmitCallback);
`| Property | Type | Description |
| ------------------ | -------------------------------------------------------------- | --------------------------------------------------------- |
| values |
| current form values state object |
| errors | ErrorsType | current form errors state object |
| handleOnChange | HandleOnChangeType | handler for input field changes |
| handleOnSubmit | HandleOnSubmitType | handler for form submission |
| isDisabled | boolean | whether form submit button should be disabled |
| isSubmitted | boolean | whether form has been successfully submitted |
| isSubmitting | boolean | whether form is currently being submitted |
| isDirty | boolean | whether any form field has been modified |
| resetForm | () => void | function to reset entire form |
| resetField | (fieldName: keyof T) => void | function to reset specific field |
| formModel | FormModelType | initial form model with optional validation function |
| formSubmitCallback | (values: T) => void \| Promise#### Type definitions: docs/definitions.md