https://github.com/siddhesh-10/react-form-binder-2
A React hook for form state management with Angular-like two-way binding, nested state support, and validation — all with TypeScript support.
https://github.com/siddhesh-10/react-form-binder-2
npm-package two-way-data-binding
Last synced: about 2 months ago
JSON representation
A React hook for form state management with Angular-like two-way binding, nested state support, and validation — all with TypeScript support.
- Host: GitHub
- URL: https://github.com/siddhesh-10/react-form-binder-2
- Owner: siddhesh-10
- Created: 2025-02-10T14:26:15.000Z (4 months ago)
- Default Branch: development
- Last Pushed: 2025-02-18T06:23:18.000Z (3 months ago)
- Last Synced: 2025-03-27T06:22:43.250Z (2 months ago)
- Topics: npm-package, two-way-data-binding
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-form-binder-2
- Size: 37.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-form-binder
A React hook for form state management with Angular-like two-way binding, nested state support, and validation — all with TypeScript support.
## Features
- **Automatic Input Binding:** Easily bind input elements to form state.
- **Nested State Support:** Use dot-notation (e.g., `user.name`) to manage nested state.
- **Field-Level & Full-Form Validation:** Supply custom validator functions for individual fields and validate the entire form.
- **TypeScript Support:** Benefit from strong typings and enhanced IDE experience.
## Installation
Using npm:
```bash
npm install react-form-binder
```
Using yarn:
```bash
yarn add react-form-binder
```
## Usage
### TypeScript Example
```tsx
import React from 'react';
import { useFormBinder } from 'react-form-binder-2';
interface FormValues {
name: string;
email: string;
user: {
age: number;
};
}
const initialValues: FormValues = {
name: '',
email: '',
user: { age: 0 },
};
const validators = {
name: (value: string) => (value.trim() === '' ? 'Name is required' : undefined),
email: (value: string) => (/\S+@\S+\.\S+/.test(value) ? undefined : 'Invalid email address'),
'user.age': (value: number) => (value < 18 ? 'Age must be at least 18' : undefined),
};
const MyForm: React.FC = () => {
const { values, errors, bind, validate } = useFormBinder(initialValues, validators);
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (validate()) {
console.log('Form submitted:', values);
} else {
console.log('Validation errors:', errors);
}
};
return (
Name:
{errors.name && {errors.name}}
Email:
{errors.email && {errors.email}}
Age:
{errors['user.age'] && {errors['user.age']}}
Submit
);
};
export default MyForm;
```
### JavaScript Example
```jsx
import React from 'react';
import { useFormBinder } from '@yourusername/react-form-binder';
const MyForm = () => {
const initialValues = { name: '', email: '', user: { age: 0 } };
const validators = {
name: (value) => (value.trim() === '' ? 'Name is required' : undefined),
email: (value) => (/\S+@\S+\.\S+/.test(value) ? undefined : 'Invalid email address'),
'user.age': (value) => (value < 18 ? 'Age must be at least 18' : undefined),
};
const { values, errors, bind, validate } = useFormBinder(initialValues, validators);
const handleSubmit = (e) => {
e.preventDefault();
if (validate()) {
console.log('Form submitted:', values);
} else {
console.log('Validation errors:', errors);
}
};
return (
Name:
{errors.name && {errors.name}}
Email:
{errors.email && {errors.email}}
Age:
{errors['user.age'] && {errors['user.age']}}
Submit
);
};
export default MyForm;
```
## Contributing
Contributions are welcome! Feel free to submit issues or pull requests to improve the project.
## License
This project is licensed under the [MIT License](LICENSE).