🥤 Lightweight ReactJS form validation library with Hooks
npm install bubbleform
import BubbleForm from "bubbleForm"
const {} = BubbleForm({})
const {
data: loginData,
handleChange,
handleSubmit,
errors,
handleBlur,
} = useForm({
initialErrorMessage: loginErrorMessage,
initialValues: loginFormData,
sanitizeFn: (value) => {
return value.trim();
},
validations: {
email: {
required: {
value: true,
message: "Email is required",
},
pattern: {
value: "^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$",
message: "Email is invalid",
},
},
password: {
required: {
value: true,
message: "Password is required",
},
pattern: {
value: "^(?=.*[a-z])[a-zA-Z\\d]{8,}$",
message: "Password must be at least 8 characters",
},
custom: {
length: { //any custom name
isValid: (value: any) => value.length > 6,
message: "First name must be at least 8 characters",
},
},
},
},
onSubmit: () => {
dispatch(LoginApi(loginData));
},
});
Bubble Form takes in some parameter to work properly
Params | Description | Type | Default |
---|---|---|---|
data | return object containing the form data | Object |
none |
handleChange | onChange event handler. Useful for when you need to track whether an input has been touched or not. This should be passed to <input onBlur={handleChange()} ... /> |
Function |
none |
handleSubmit | Submit handler. This should be passed to <form onSubmit={props.handleSubmit}> |
Function |
none |
handleBlur | onBlur event handler. Useful for when you need to track whether an input has been touched or not. This should be passed to <input onBlur={handleBlur()} ... /> |
Function |
none |
Initial error message to be displayed when the form is rendered for the first time should an empty string or an object with the same keys as the form data
const loginErrorMessage = {
email: "",
password: "",
};
### 🛠 initialValues
Initial values for the form data should an empty string or an object with the same keys as the form data
const loginFormData = {
email: "",
password: "",
};
A function that takes in the value of the input and returns the sanitized value
const sanitizeFn = (value) => {
return value.trim();
};
An object containing the validation rules for the form data
const loginValidations = {
email: {
required: {
value: true,
message: "Email is required",
},
pattern: {
value: "^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$",
message: "Email is invalid",
},
},
password: {
required: {
value: true,
message: "Password is required",
},
pattern: {
value: "^(?=.*[a-z])[a-zA-Z\\d]{8,}$",
message: "Password must be at least 8 characters",
},
custom: { // take in an object of custom rules
length: { //any custom name
isValid: (value: any) => value.length > 6, // Function that takes in the value of the input and returns a boolean
message: "First name must be at least 8 characters", // error message
},
},
},
};
If you experience any anomaly or bug while using the component, feel free to create an issue on this repo
issues
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request