🎯 React 100 Form

YES! As the name says, only 💯 lines of code for a powerful CUSTOM HOOK.

YES! It has most features you might need when dealing with form.

• See it in action
• Look the code - all features or Refer to the samples folder to get inspired
• (Obviously) It uses TypeScript

✅ Zero dependencies (excelent bundle size)

✅ Only peer dependency: React

✅ 💥 1.6k gzipped 💥

Installation

npm install react-100-form

or

yarn add react-100-form

Simple Usage

const initialValues = {name: '', accepted: false};
const validate = (values) => {
	const errorMap = {};
	errorMap.name = values.name === '' && 'Required';
	errorMap.accepted = !values.accepted && 'Should be checked';
	return errorMap;
}
const doSubmit = (values) => { /* your submit logic */ };
const {
	errorMap,
	handleSubmit,
	isValid,
	values
} = useForm(initialValues, validate);
...	...
<form onSubmit={handleSubmit(doSubmit)}>
...	...
<input
	name="name"
	onBlur={handleBlur}
	onChange={handleChange}
	type="text"
	value={values.name}
/>
{errorMap.name && <span>{errorMap.name}</span>}
...	...
<input
	name="accepted"
	onBlur={handleBlur}
	onChange={handleChange}
	type="checkbox"
	value={values.accepted}
/>
{errorMap.accepted && <span>{errorMap.accepted}</span>}
...	...
<button type="submit" disabled={!isValid}>Submit</button>

All features

const {
	commit, // Set current values as inital state
	errorMap,
	handleBlur,
	handleChange,
	handleSubmit,
	isDirty,
	isSubmitting,
	isValid,
	rollBack, // Restore to initial state or to last committed state
	touchedMap,
	values,
} = useForm(
	initialValues,
	validate
);

Author

Mario Medrano Maldonado (Gendecoder) mario.medrano.maldonado@gmail.com