https://github.com/jayeshsojitra103/use-react-form-hook
📋 React Hooks for form state management and validation
https://github.com/jayeshsojitra103/use-react-form-hook
form form-builder form-hook module package react react-form react-form-validation validation
Last synced: 8 months ago
JSON representation
📋 React Hooks for form state management and validation
- Host: GitHub
- URL: https://github.com/jayeshsojitra103/use-react-form-hook
- Owner: jayeshsojitra103
- Created: 2022-11-14T13:19:48.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-12-05T06:22:24.000Z (over 3 years ago)
- Last Synced: 2025-06-16T17:20:42.323Z (9 months ago)
- Topics: form, form-builder, form-hook, module, package, react, react-form, react-form-validation, validation
- Language: JavaScript
- Homepage: https://jayeshsojitra103.github.io/use-react-form-hook/
- Size: 2.5 MB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# use-react-form-hook
>
[](https://www.npmjs.com/package/use-react-form-hook) [](https://standardjs.com)
## Install
```bash
npm install --save use-react-form-hook
```
## Usage
## Add Page
```jsx
import React from 'react'
import { useForm } from 'use-react-form-hook';
import { VALIDATOR_REQUIRE, VALIDATOR_MINLENGTH, VALIDATOR_EMAIL, validate } from './utils/validators';
import './index.css';
const App = () => {
//Pass all field details in hook
const [formState, inputHandler, setFormData] = useForm({
name: {
value: '',
isValid: false,
},
email: {
value: '',
isValid: false
},
address: {
value: '',
isValid: false
}
}, false);
const changeHandler = (event, valid) => {
let { id, value } = event.target;
inputHandler(id, value, validate(value, valid))
};
const touchHandler = (id) => {
const { name, email, address } = formState.inputs;
setFormData(
{
...formState.inputs,
[id]: {
...formState.inputs[id],
isTouched: true
},
},
email?.isValid && address?.isValid && name?.isValid
);
}
const OnFormSubmit = (e) => {
e.preventDefault();
console.log(formState.inputs);
alert(JSON.stringify(formState.inputs,null,4))
}
return (
{ changeHandler(e, [VALIDATOR_REQUIRE()]) }}
onBlur={() => { touchHandler('name') }}
/>
{!formState?.inputs?.name?.isValid && formState?.inputs?.name?.isTouched &&
Please enter a name.
}
{ changeHandler(e, [VALIDATOR_EMAIL()]) }}
onBlur={() => { touchHandler('email') }} />
{!formState?.inputs?.email?.isValid && formState?.inputs?.email?.isTouched &&
Please enter a valid email address
}
{ changeHandler(e, [VALIDATOR_MINLENGTH(5)]) }}
onBlur={() => { touchHandler('address') }}
rows="4"
/>
{!formState?.inputs?.address?.isValid && formState?.inputs?.address?.isTouched && Please enter a valid address (at least 5 character).
}
Submit
)
}
export default App
```
### Edit Page
```jsx
import React, { useEffect, useState } from 'react'
import { useForm } from 'use-react-form-hook';
import { VALIDATOR_REQUIRE, VALIDATOR_MINLENGTH } from './utils/validators';
const EditPage = () => {
const [formState, inputHandler, setFormData] = useForm(
{
name: {
value: '',
isValid: false
},
address: {
value: '',
isValid: false
}
},
false
);
useEffect(() => {
setFormData(
{
name: {
value: 'Jayesh Sojitra',
isValid: true
},
address: {
value: 'Ahmedabad, India',
isValid: true
}
},
true
);
}, [])
return (
Edit Page
Submit
);
}
export default EditPage;
```
## License
MIT © [jayeshsojitra103](https://github.com/jayeshsojitra103)
---
This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).