react-form-gear
Simple hook for handling form in simple way fully typed
react 18.0 or higher
Install
npm install --save react-form-gear
yarn add react-form-gear
Usage
#define your model with same structure
const LoginFormState = {
email: {
value: "",
isValid: true,
errorMessage: "",
constraints: [
{ type: "required", message: "Email is Required" },
{ type: "email", message: "email incorrect" },
],
},
password: {
value: "",
isValid: true,
errorMessage: "",
constraints: [
{ type: "required", message: "Password is Required" },
{
type: "minLength",
data: { min: 8 },
message: "password must be 8 charactor",
},
],
},
//Dynamic Function Validation
zipCode: {
value: "",
isValid: true,
errorMessage: "",
constraints: [
{ type: "required", message: "zipCode is Required" },
{
type: "onlyFourDigit",
message: "Must four digit",
validateFunction: {
onlyFourDigit: (value) => {
return value.length === 4 ? true : false;
},
},
},
],
},
};
import React from "react";
import useformGear from "react-form-gear";
function App() {
const { handleChange, handleSubmit, fields, isValidForm, isSubmitting } =
useformGear({
formFields: LoginFormState, //use Your Model
//immediateError: true, --show Error as user start write input
afterSubmit: (isValid) => {
//Get is form Valid
//do after submit valid form
if (isValid) {
alert("Form Submit");
} else {
alert("Not Valid");
}
},
});
return (
<div>
<h1>React Form Gear</h1>
<input
placeholder="email"
value={fields.email.value}
onChange={handleChange}
name={"email"}
/>
{fields.email.isValid ? null : <h1>{fields.email.errorMessage}</h1>}
<input
placeholder="password"
value={fields.password.value}
onChange={handleChange} //must
name={"password"} //must
/>
{fields.password.isValid ? null : <h1>{fields.password.errorMessage}</h1>}
<input
placeholder="Zip Code"
value={fields.zipCode.value}
onChange={handleChange} //must
name={"zipCode"} //must
/>
{fields.zipCode.isValid ? null : <h1>{fields.zipCode.errorMessage}</h1>}
<button onClick={handleSubmit}>Submit</button>
</div>
);
}
test drive https://codesandbox.io/s/react-form-gear-demo-qr9gu6
With Types
Infer type from given model(But need to follow model structure strictly)
Now fields have fully types
Type of fields from above example is
const fields: {
email: {
value: string;
isValid: boolean;
errorMessage: string;
constraints: {
type: string;
message: string;
}[];
};
password: {
value: string;
isValid: boolean;
errorMessage: string;
constraints: ({
...;
} | {
...;
})[];
};
} & FormFields
We can infer for you if we can
useformGear(...)
You can provide generic as args
useformGear<typeof LoginFormState>
Constraints Types Available
Types |
---|
required |
minLength |
url |
numbers |
letters |
username |
more will be add
You can add your own validation using dynamic function validation <+> function should return only true or false
fourDigit: {
value: "",
isValid: true,
errorMessage: "",
constraints: [
{ type: "required", message: "FourDigit is Required" },
{
type: "onlyFourDigit",
message: "only four digit",
validateFunction: {//<+>
onlyFourDigit: value => {
return value.length == 4 ? true : false;
}
}
}
]
}
Road Map
Typescript Support(Partial Done)
Yup & Zod validator Support
Minor Tweaks
Any Suggestions and improvement are welcome