{"id":20503296,"url":"https://github.com/jayeshsojitra103/use-react-form-hook","last_synced_at":"2025-07-18T10:35:14.435Z","repository":{"id":144675012,"uuid":"565853634","full_name":"jayeshsojitra103/use-react-form-hook","owner":"jayeshsojitra103","description":"📋 React Hooks for form state management and validation","archived":false,"fork":false,"pushed_at":"2022-12-05T06:22:24.000Z","size":2618,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-16T17:20:42.323Z","etag":null,"topics":["form","form-builder","form-hook","module","package","react","react-form","react-form-validation","validation"],"latest_commit_sha":null,"homepage":"https://jayeshsojitra103.github.io/use-react-form-hook/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jayeshsojitra103.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-14T13:19:48.000Z","updated_at":"2024-12-23T11:30:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"67ef590f-b37b-4dfb-b494-3b3b366e0a6b","html_url":"https://github.com/jayeshsojitra103/use-react-form-hook","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jayeshsojitra103/use-react-form-hook","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayeshsojitra103%2Fuse-react-form-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayeshsojitra103%2Fuse-react-form-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayeshsojitra103%2Fuse-react-form-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayeshsojitra103%2Fuse-react-form-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jayeshsojitra103","download_url":"https://codeload.github.com/jayeshsojitra103/use-react-form-hook/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayeshsojitra103%2Fuse-react-form-hook/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265527610,"owners_count":23782480,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form","form-builder","form-hook","module","package","react","react-form","react-form-validation","validation"],"created_at":"2024-11-15T19:30:07.394Z","updated_at":"2025-07-18T10:35:14.413Z","avatar_url":"https://github.com/jayeshsojitra103.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-react-form-hook\n\n\u003e \n\n[![NPM](https://img.shields.io/npm/v/use-react-form-hook.svg)](https://www.npmjs.com/package/use-react-form-hook) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Install\n\n```bash\nnpm install --save use-react-form-hook\n```\n\n## Usage\n\n\n## Add Page\n```jsx\nimport React from 'react'\nimport { useForm } from 'use-react-form-hook';\nimport { VALIDATOR_REQUIRE, VALIDATOR_MINLENGTH, VALIDATOR_EMAIL, validate } from './utils/validators';\nimport './index.css';\n\nconst App = () =\u003e {\n  //Pass all field details in hook\n  const [formState, inputHandler, setFormData] = useForm({\n    name: {\n      value: '',\n      isValid: false,\n    },\n    email: {\n      value: '',\n      isValid: false\n    },\n    address: {\n      value: '',\n      isValid: false\n    }\n\n  }, false);\n\n  const changeHandler = (event, valid) =\u003e {\n    let { id, value } = event.target;\n    inputHandler(id, value, validate(value, valid))\n  };\n\n  const touchHandler = (id) =\u003e {\n    const { name, email, address } = formState.inputs;\n    setFormData(\n      {\n        ...formState.inputs,\n        [id]: {\n\n          ...formState.inputs[id],\n          isTouched: true\n        },\n      },\n      email?.isValid \u0026\u0026 address?.isValid \u0026\u0026 name?.isValid\n    );\n  }\n\n  const OnFormSubmit = (e) =\u003e {\n    e.preventDefault();\n    console.log(formState.inputs);\n\n    alert(JSON.stringify(formState.inputs,null,4))\n  }\n\n\n  return (\n    \u003cdiv className='form-box'\u003e\n      \u003cform onSubmit={OnFormSubmit}\u003e\n        \u003cdiv\n          className={`form-control ${!formState?.inputs?.name?.isValid \u0026\u0026 formState?.inputs?.name?.isTouched \u0026\u0026\n            'form-control--invalid'}`}\n        \u003e\n\n          \u003cinput\n            id=\"name\"\n            type=\"text\"\n            onChange={(e) =\u003e { changeHandler(e, [VALIDATOR_REQUIRE()]) }}\n            onBlur={() =\u003e { touchHandler('name') }}\n          /\u003e\n          {!formState?.inputs?.name?.isValid \u0026\u0026 formState?.inputs?.name?.isTouched \u0026\u0026 \u003cp\u003ePlease enter a name.\u003c/p\u003e}\n        \u003c/div\u003e\n\n        \u003cdiv\n          className={`form-control ${!formState?.inputs?.email?.isValid \u0026\u0026 formState?.inputs?.email?.isTouched \u0026\u0026\n            'form-control--invalid'}`}\n        \u003e\n\n          \u003cinput\n            id=\"email\"\n            type=\"email\"\n            onChange={(e) =\u003e { changeHandler(e, [VALIDATOR_EMAIL()]) }}\n            onBlur={() =\u003e { touchHandler('email') }} /\u003e\n\n          {!formState?.inputs?.email?.isValid \u0026\u0026 formState?.inputs?.email?.isTouched \u0026\u0026 \u003cp\u003ePlease enter a valid email address\u003c/p\u003e}\n        \u003c/div\u003e\n\n        \u003cdiv\n          className={`form-control ${!formState?.inputs?.address?.isValid \u0026\u0026 formState?.inputs?.address?.isTouched \u0026\u0026\n            'form-control--invalid'}`}\n        \u003e\n          \u003ctextarea\n            id=\"address\"\n            onChange={(e) =\u003e { changeHandler(e, [VALIDATOR_MINLENGTH(5)]) }}\n            onBlur={() =\u003e { touchHandler('address') }}\n            rows=\"4\"\n          /\u003e\n          {!formState?.inputs?.address?.isValid \u0026\u0026 formState?.inputs?.address?.isTouched \u0026\u0026 \u003cp\u003ePlease enter a valid address (at least 5 character).\u003c/p\u003e}\n        \u003c/div\u003e\n\n        \u003cdiv className='center'\u003e\n          \u003cbutton disabled={!formState.isValid} type=\"submit\" className='button'\u003eSubmit\u003c/button\u003e\n        \u003c/div\u003e\n      \u003c/form \u003e\n    \u003c/div \u003e\n  )\n}\nexport default App\n```\n\n### Edit Page\n\n```jsx\n\nimport React, { useEffect, useState } from 'react'\nimport { useForm } from 'use-react-form-hook';\nimport { VALIDATOR_REQUIRE, VALIDATOR_MINLENGTH } from './utils/validators';\n\n\nconst EditPage = () =\u003e {\n    const [formState, inputHandler, setFormData] = useForm(\n        {\n            name: {\n                value: '',\n                isValid: false\n            },\n            address: {\n                value: '',\n                isValid: false\n            }\n        },\n        false\n    );\n\n    useEffect(() =\u003e {\n        setFormData(\n            {\n                name: {\n                    value: 'Jayesh Sojitra',\n                    isValid: true\n                },\n                address: {\n                    value: 'Ahmedabad, India',\n                    isValid: true\n                }\n            },\n            true\n        );\n\n    }, [])\n\n    return (\n        \u003cdiv className='container'\u003e\n            \u003cdiv className='main'\u003e\n                \u003cdiv className='row'\u003e\n                    \u003cdiv className='col-lg-8 mb-20'\u003e\n                        \u003cdiv className='card pitch'\u003e\n                            \u003cheader className='auth-content'\u003e\n                                \u003ch1\u003eEdit Page\u003c/h1\u003e\n                            \u003c/header\u003e\n                            \u003cform\u003e\n\n                                \u003cInput\n                                    id=\"name\"\n                                    type=\"text\"\n                                    label=\"Name\"\n                                    errorText=\"Please enter a name\"\n                                    validators={[VALIDATOR_REQUIRE()]}\n                                    onInput={inputHandler}\n                                    initialValue={formState.inputs.name.value}\n                                    initialValid={true}\n                                /\u003e\n                                \u003cInput\n                                    id=\"address\"\n                                    type=\"textarea\"\n                                    label=\"Address\"\n                                    rows=\"5\"\n                                    errorText=\"Please enter a address, at least 10 characters\"\n                                    validators={[VALIDATOR_MINLENGTH(10)]}\n                                    onInput={inputHandler}\n                                    initialValue={formState?.inputs?.address?.value}\n                                    initialValid={true}\n                                /\u003e\n\n                                \u003cdiv className=\"input-container center\"\u003e\n                                    \u003cButton\n\n                                        type=\"button\"\n                                        disabled={!formState.isValid}\u003e\n                                        Submit\n                                    \u003c/Button\u003e\n                                \u003c/div\u003e\n                            \u003c/form\u003e\n                        \u003c/div\u003e\n                    \u003c/div\u003e\n                    \u003cdiv className='col-lg-4 '\u003e\n                        \u003cUserWidget user={auth?.user} tags={tags} /\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    );\n}\n\nexport default EditPage;\n```\n## License\n\nMIT © [jayeshsojitra103](https://github.com/jayeshsojitra103)\n\n---\n\nThis hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjayeshsojitra103%2Fuse-react-form-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjayeshsojitra103%2Fuse-react-form-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjayeshsojitra103%2Fuse-react-form-hook/lists"}