@avinlab/react-form
v0.3.2
Published
A React library for building forms with ease, providing hooks for managing form state and validation in React applications.
Downloads
19
Readme
@avinlab/react-form
A React library for building forms with ease, providing hooks for managing form state and validation in React applications.
Features
- 🎯 Easy to use: Simple API for managing form state with minimal boilerplate.
- 🔧 Customizable: Extendable to fit the needs of your specific form logic.
- 🚀 Performance: Optimized to reduce unnecessary renders and improve performance.
Installation
npm install @avinlab/react-form
Playground
Online example is here
Usage
Create form with validation:
import React from 'react';
import { useForm, useFormValidation, useFormWatch } from '@avinlab/react-form';
const ExampleForm = () => {
const form = useForm({ name: 'Bob', age: 20 });
const { errors, isValid, validate } = useFormValidation(form, (values, prevValues) => {
const errors = {};
if (!values.name) {
errors.name = 'Name is required';
}
if (values.age && values.age < 18) {
errors.age = 'Must be at least 18';
}
return errors;
});
const handleSubmit = (e) => {
e.preventDefault();
if (isValid) {
console.log(form.values);
}
};
// If you want to render the form values:
// const nameValue = useFormWatch(form, 'name');
// const formValuesObj = useFormWatch(form);
return (
<form onSubmit={handleSubmit}>
<input
name="name"
defaultValue={form.values.name}
onChange={(e) => form.setValue('name', e.currentTarget.value)}
/>
{errors.name && <span className="error">{errors.name}</span>}
<input
name="age"
defaultValue={form.values.age}
onChange={(e) => form.setValue('name', e.currentTarget.value)}
/>
{errors.name && <span className="error">{errors.name}</span>}
<button type="submit" disabled={!isValid}>
Submit
</button>
</form>
);
};
Examples
For more advanced examples, check out the example directory.