graneet-form
v3.0.0TypeScript
<div align="center">
0/weekUpdated 4 months agoMITUnpacked: 232.7 KB
Published by graneet
npm install graneet-formgraneet-form
$3
📚 Documentation • 🚀 Quick Start • **💡 Examples
**
---
Table of Contents
- Features
- Installation
- Usage
- Wizard Example
- API Reference
- Contributing
- License
Features 🚀
- Performant and easy to use - Built for optimal performance with minimal re-renders
- Integrated wizard system - Seamlessly combine multi-step forms with powerful form management
- Small bundle size - Lightweight library that won't bloat your application
- Built-in error handling - Comprehensive validation and error management
- Value watching - Real-time form state monitoring and reactive updates
- TypeScript support - Full type safety out of the box
Installation
``bashUsing pnpm (recommended)
pnpm add graneet-form
Using yarn
yarn add graneet-form
Using npm
npm install graneet-form
`
Usage
$3
tsx
import {Field, Form, useForm} from 'graneet-form';function Input({name}: { name: string }) {
return (
render={({value, onChange, onBlur, onFocus}, state) => (
onChange={onChange}
onBlur={onBlur}
onFocus={onFocus}
placeholder={Enter ${name}}
style={{
borderColor: state.error ? '#ff6b6b' : '#e0e0e0',
padding: '8px 12px',
borderRadius: '4px',
border: '1px solid'
}}
/>
{state.error && (
{state.error}
)}
)}
/>
);
}function App() {
const form = useForm({
validations: {
firstName: (value) => !value ? 'First name is required' : undefined,
lastName: (value) => !value ? 'Last name is required' : undefined
}
});
const handleSubmit = async () => {
const isValid = await form.validate();
if (isValid) {
const values = form.getFormValues();
console.log('✅ Form submitted:', values);
} else {
console.log('❌ Form has errors');
}
};
return (
);
}
`Wizard Example
Create multi-step forms with ease:
tsx
import {Step, Wizard, useWizard} from 'graneet-form';function MultiStepForm() {
const wizard = useWizard({
validations: {
personal: {
firstName: (value) => !value ? 'Required' : undefined,
lastName: (value) => !value ? 'Required' : undefined
},
contact: {
email: (value) => {
if (!value) return 'Email is required';
if (!/\S+@\S+\.\S+/.test(value)) return 'Invalid email';
return undefined;
}
}
}
});
const {currentStep, isFirstStep, isLastStep, nextStep, previousStep} = wizard;
return (
Step 1: Personal Details
Step 2: Contact Details
Step 3: Review & Submit
{JSON.stringify(wizard.getAllValues(), null, 2)}
{!isFirstStep && (
)}
{!isLastStep ? (
) : (
)}
);
}
`API Reference
$3
| Hook | Description | Returns |
|----------------------------|---------------------------------------|---------------------------------------|
|
| Initialize a new form instance | Form object with methods and state |
| useWizard(options?) | Initialize a new wizard instance | Wizard object with navigation methods |
| useFormStatus() | Get current form validation status | { isValid, errors, isDirty } |
| useFieldValidation(name) | Handle field-level validation | Field validation state |
| useFormValues() | Access current form values reactively | Current form values object |$3
| Component | Props | Description |
|------------|------------------------------------|---------------------------------------|
|