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
samplesfolder to get inspired - (Obviously) It uses TypeScript
✅ Zero dependencies (excelent bundle size)
✅ Only peer dependency: React
✅ 💥 1.6k gzipped 💥
npm install react-100-form
or
yarn add react-100-form
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>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
);Mario Medrano Maldonado (Gendecoder) mario.medrano.maldonado@gmail.com